reactjs-editor - npm Package Compare versions

Comparing version 2.2.3 to 3.3.3

package.json

 {
   "name": "reactjs-editor",
-  "version": "2.2.3",
+  "version": "3.3.3",
   "description": "A simple react library that lets you highlight text, make text bold, and add comment on any text as a sticky notes",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -9,4 +9,8 @@ <h1 align="center" >
 
+
+
 <h4 align="center">React package to highlight text,make text bold,add comment to text.<a href="https://react-editor-kappa.vercel.app/" target="_blank">View Demo</a>.</h4>
 
+
+
 <p align="center">
@@ -22,22 +26,27 @@
 
+---
 
-
 ![screenshot](https://raw.githubusercontent.com/vivekneupane11/qanuny/main/ScreenRecording2024-02-03at19.15.58-ezgif.com-video-to-gif-converter%20(1).gif)
 
 
-#  Get Started
+---
 
+#  Get Started 👨🏻‍✈️
 
 
-### Installation and Setup
 
+### 🛠️🛠️ Installation and Setup 🌱🌱
+<br>
+
 ```
 $ npm i reactjs-editor
-
 ```
 
-###  <div style="margin-top: 40px;"> 🌟  Note:  ⏭️ Necessary Only For Typescript Project 🌟 </div>
+---
 
-### ⏭️  If your React Project is in Typescript
 
+###  <div style="margin-top: 40px;">  🛠️🛠️ Necessary Only For Typescript Project 🛠️🛠️ </div>
+
+#### ✔ 🛠️🛠️  Only  If your React Project is in Typescript 🛠️🛠️
+
 ```
@@ -48,12 +57,14 @@ $ cd <your typescript project root>
 
-  ## Add this line below and save ⬇️ ⬇️
+  ## Add this line below and save 📝📝
 
   declare module 'reactjs-editor';    //add this line and save
 
+```
 
-  ## Now go to tsconfig.json file 
+```
+  ## Now go to tsconfig.json file 🏃🏃🏃 
   
   $ cd tsconfig.json  
 
-  ## And just include file you created above  
+  ## And just include path to file you created above  ➕➕➕
 
@@ -67,5 +78,6 @@ "include": [
 
+---
 
 #### <div style="margin-top: 40px;"> 
-🎉🎉 Congratulations Setup Completed  🌟 Lets Create Magic Now  </div> 🌟
+🎉🎉 Congratulations Setup Completed 🥳🥳🥳  <br> <br> 🌟🧙‍♂️🧙‍♂️ Lets Create Magic 🎩🎩🎩 Now  </div> 🌟🧙‍♂️🧙‍♂️
 
@@ -76,3 +88,3 @@
 
-# <div style="margin-top: 70px;"> Let's create a magic now </div> 
+# <div style="margin-top: 70px;">🦄✨🧙🏼‍♀️ Let's create a magic now  🦄✨🧙🏼‍♀️ </div> 
 
@@ -105,14 +117,20 @@
 
+---
+###  <div style="margin-top: 60px; padding:20px; margin-bottom:20px;border:2px solid yellow;">  <div style="color:red;"> 🚨🚨🚨 Note: ⚠️⚠️  Its important: </div>  <br>🚨🚨🚨 Make sure your htmlContent is wrapped inside main tag <br> <br>  ✅✅✅ <br><br> ` htmlContent={ ` <br>` <main> `<br>`{ *** all your html content here *** }`<br>`</main> `<br>`}` <br> <br> ✅✅✅ </div>
 
-## <div style="margin-top: 30px;"> 🎉🎉🎉 That's it.   🎉🎉🎉 </div>
-####### 🌟🌟 Go Simran go, live your life 🌟🌟
 
+# <div style="margin-top: 70px;"> 🎉🎉🎉 That's it.   🎉🎉🎉 </div>
+🚉🚉🚉🚉🚉🚉 GO SIMRAN GO, LIVE YOUR LIFE  🏃🏻‍♀️🏃🏻‍♀️🏃🏻‍♀️🏃🏻‍♀️🏃🏻‍♀️🏃🏻‍♀️
 
 
-####  <div style="margin-top: 60px; padding:20px; margin-bottom:20px;border:2px solid yellow;"> 🌟 Note: ⚠️⚠️  Its important:  <br> <br>🌟 Make sure your htmlContent is wrapped inside main tag <br> <hr>  ` htmlContent={ <main>{ *** all your html content }</main>`  </div>
 
 
+
 # <div style="margin-top:70px;"> Get Access to Changed HTML Element. </div>
 
+### 💾  Save user html changes and show them their changes on subsequent visit
 
+
+
+
 ```
@@ -124,18 +142,42 @@
 
-  const {dom,setDom} = useDomValue()
-   console.log("%j", dom);  //get your changed dom  like this and save it if you like to
+ 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
  
-  useEffect(()=>{
-setDom( domObject)  //set your dom like this
-  },[])
+  }
+  updateDom(updatedDomValue) // call this function where ever you like
 
+},[])
+
 ```
 
+---
 
 
-#  <div style="margin-top:80px;"> Additional Features for Customizations </div>
+#  <div style="margin-top:50px;"> Additional Features for Customizations </div>
 
 
 
-## Add your own colors 
+### Add your own colors 
 
@@ -150,3 +192,3 @@ ```
 
-## Then add your class  in your css file
+### Makre sure to add your class  in your css file
 
@@ -169,4 +211,9 @@ ```
 
+//add as much as you like
+
 ```
 
+---
+
+
 # <div style="margin-top:70px;"> If you want to customize designs of all other components such as floating button and modals </div>
@@ -180,3 +227,3 @@
 
- In future update, I will create option to pass all components such as a props
+ In future update, I will create option to pass all components in a props
 
@@ -183,0 +230,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

56293

1.94%

Number of lines in readme file

235

25%

No dependency changes