Merge pull request #424 from bluewave-labs/master

To pull changes for editor

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+## Describe your changes
+
+Briefly describe the changes you made and their purpose.
+
+## Issue number
+
+Mention the issue number(s) this PR addresses (e.g., #123).
+
+## Please ensure all items are checked off before requesting a review:
+
+- [ ] I deployed the code locally.
+- [ ] I have performed a self-review of my code.
+- [ ] I have included the issue # in the PR.
+- [ ] I have labelled the PR correctly.
+- [ ] The issue I am working on is assigned to me.
+- [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
+- [ ] I made sure font sizes, color choices etc are all referenced from the theme.
+- [ ] My PR is granular and targeted to one specific feature.
+- [ ] I took a screenshot or a video and attached to this PR if there is a UI change.

README.md

@@ -29,6 +29,87 @@ This is a work-in-progress application. The source code is available under GNU A
 - [Node.js](https://nodejs.org/en)
 - [PostgreSQL](https://postgresql.org)
 
+
+## Installation
+
+1. Make sure Docker is installed to your machine where the server will run.
+2. Make sure git is installed to your machine Git.
+3. Make sure nginx is installed.
+
+4. Clone GitHub Repository
+
+```
+cd ~
+git clone https://github.com/bluewave-labs/bluewave-onboarding.git
+cd bluewave-onboarding
+```
+
+5. Configure Nginx
+
+Open the Nginx configuration file:
+
+``sudo nano /etc/nginx/sites-available/onboarding-demo``
+
+Add the following configuration. Change YOUR_DOMAIN_NAME with your domain name:
+
+```server {
+    listen 80;
+    server_name YOUR_DOMAIN_NAME;
+    return 301 https://$host$request_uri; 
+    }
+
+server {
+    listen 443 ssl;
+    server_name YOUR_DOMAIN_NAME;
+    ssl_certificate /etc/letsencrypt/live/YOUR_DOMAIN_NAME/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN_NAME/privkey.pem;
+    include /etc/letsencrypt/options-ssl-nginx.conf;
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
+
+    location / {
+        proxy_pass http://localhost:4173;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/ {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+
+6. Create a symbolic link to enable the configuration:
+
+``sudo ln -s /etc/nginx/sites-available/onboarding-demo /etc/nginx/sites-enabled/``
+
+7. Install Certbot and its Nginx plugin:
+
+``sudo apt install certbot python3-certbot-nginx``
+
+8. Obtain SSL Certificate. Run Certbot to obtain a certificate for your domain:
+
+``sudo certbot --nginx``
+
+9. Verify the Nginx configuration:
+
+``sudo nginx -t``
+
+10. Restart Nginx to apply the changes:
+
+``sudo systemctl restart nginx``
+
+11. Start the project
+
+``cd ~/bluewave-onboarding
+docker compose up -d``
+
 ## Contributing
 
 Here's how you can contribute to the Onboarding product. 

frontend/src/components/RichTextEditor/Toolbar/EditorToolbar.jsx

@@ -56,12 +56,18 @@ const Toolbar = ({ editor }) => {
       <Button
         onClick={() => editor.chain().focus().toggleBold().run()}
         disabled={!editor.can().chain().focus().toggleBold().run()}
+        style = {{
+          backgroundColor : editor.isActive("bold") ? "#e0e0e0": "transparent",
+        }}
       >
         <FormatBold />
       </Button>
       <Button
         onClick={() => editor.chain().focus().toggleItalic().run()}
         disabled={!editor.can().chain().focus().toggleItalic().run()}
+        style = {{
+          backgroundColor : editor.isActive("italic")? "#e0e0e0" : "transparent",
+        }}
       >
         <FormatItalic />
       </Button>
@@ -70,6 +76,10 @@ const Toolbar = ({ editor }) => {
         disabled={
           !editor.can().chain().focus().toggleHeading({ level: 2 }).run()
         }
+        style = {{
+          backgroundColor: editor.isActive("heading", {level:3})
+          ? "#e0e0e0" : "transparent",
+        }}
       >
         <Title />
       </Button>
@@ -79,12 +89,20 @@ const Toolbar = ({ editor }) => {
       <Button
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         disabled={!editor.can().chain().focus().toggleBulletList().run()}
+        style = {{
+          backgroundColor : editor.isActive("bulletList") ? "#e0e0e0" : "transparent",
+
+        }}
       >
         <FormatListBulleted />
       </Button>
       <Button
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         disabled={!editor.can().chain().focus().toggleOrderedList().run()}
+
+        style = {{
+          backgroundColor : editor.isActive("orderedList") ? "#e0e0e0" : "transparent",
+        }}
       >
         <FormatListNumbered />
       </Button>