DEV Community: john

Rich Text Editor in React.js with more Powerful features

john — Thu, 11 May 2023 03:41:58 +0000

I was struggling to implement an editor in my blog Application i have tried ck editor and couple of other editors and most of them are buggy and not working properly and the interface was also not so much good

Finally I found editor.js
The best Editor I found Ever

Editorjs

It is highly maintanable and you can customize every component inside each data you enter is parsed into json in a block of array each content has it's own type and id
`
[
timestamp:3333,
blocks:[{
content:"This is a Heding",
type:"Heading"
...rest
}]
...rest
]

`
this is the sample format of data that is getting from the editor
whenever you want to show data in an html page you have to use a parser which we will deeply in the following section
the parser is not fully functional for table and button components this parser will not parse buttons and tables but it won't cause any errors while displaying in html
instead you can create your custom parser i will write the code in the last section how to handle that

if the new version of editor.js is not working don't worry about that we will fix that
here i am showing a screenshot of the blog

This editor can be used to send For multiple purpose here i have created a blog application

to upload image you must specify some configurations in the file

`import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import Marker from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";
import AnyButton from "editorjs-button";
let items;
export const EDITOR_JS_TOOLS = {
embed: Embed,
table: Table,
marker: Marker,
list: List,
AnyButton: AnyButton,
warning: Warning,
code: Code,
linkTool: LinkTool,
image: {
class: Image,
config: {
uploader: {
uploadByFile(file) {
//this is a custom method that will accept file in aws by 2 steps
const myJavs = {
upload: async function (data) {
console.log(data);
await fetch(
"https://backend.yourDomain.com/aws_utils/pre_signed_url/",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization:
"Bearer token",
},
body: JSON.stringify({
content_type: data.type,
}),
}
)
.then((req) => {
console.log(req);
console.log("hello ");
return req;
})
.then(async (req) => {
const response = await req.json();
const raw = await req;
await fetch(response.url, {
method: "PUT",
body: data,
})
.then((req) => {
return req;
})
.then(async (res) => {
console.log("hi how are you",
response.url);

                  items = await response.url.split("?");
                  console.log(items);

                  return {
                    success: 1,
                    file: {
                      url: items[0],
                    },
                  };
                });
            });
        },
      };
      return myJavs.upload(file).then((data) => {
        console.log(data);

//common return that editor will only accept
return {
success: 1,
file: {
url: items[0],
},
};
});

    },
  },

//only use this if you are using a backed that will instantly return an image as a common response for image upload

//return {
// success: 1,
// file: {
// url: 'url'
// },
//};
endpoints: {
byFile: "http://localhost:8000/api/posts/post", // Your backend file uploader endpoint
byUrl: "http://localhost:8008/fetchUrl", // Your endpoint that provides uploading by Url
},
},
},
raw: Raw,
header: Header,
quote: Quote,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage,
};
`

I created Quiz-app a quiz game ecosystem

john — Sun, 16 Jan 2022 18:14:19 +0000

I have created a quiz-app with Html and Javascript 4 months ago which i used to learn javascript intermediately it uses basic javascript queries
This Application is best for beginners and Intermediate Javascript Learners

Story so far
when i was thinking to create a Quiz-app for students who can take excerises from an application i didn't found a free Application that's why i created this project

features:

Open sourced
Runs online
Have Multi-platform support
Have Multi-device support
Accesibility from anywhere
Dark and Light Themes
13 Contributors

feel free to contribute on💚
Github 👩‍💻
Please star this project Github

Light mode:

Dark mode:

Running Live Demo

Feel Free to Contribute on [Github]💚(https://github.com/johnbabu021/quiz-app) 👩‍💻

I created Sweetgradients a Color gradient Ecosystem 🧠 🧠

john — Sun, 16 Jan 2022 18:13:17 +0000

SweetGradients -A Platform where you can find out color graidents easily

Story behind SweetGradients -When i was looking for gradients to be used in a project i didn't find anything but finally i findout a web app called Uigradients built with Vue.js.So i created a React.js version of that

Github

demo

Feel Free to contribute on this project
Github
Made with 🥳

(function(){....})() Did you Know what is this

john — Sun, 16 Jan 2022 18:04:17 +0000

this function is called Immediately Invoked Function Expression(IIFE)
what's the use of this function

well this function get invoked itself at the time of load and we can do any ui process at that time let's say if i want to get data from localstorge at the time of load to find the theme used by the user let's take this eg.

(function () {
    const value = localStorage.getItem('theme')
    if (value === 'Dark Mode') {
        darkMode()
//darkMode is outside IIFE
    }
    else if (value === 'Light Mode') {
        return null
    }
    else {
        localStorage.setItem('theme', 'Light Mode')
    }
})()

this code initially check theme and if it is dark calls another function in the script if it is light it returns null and if value is not present then create a theme useful in next load

reusing css color attributes

john — Sun, 16 Jan 2022 17:52:24 +0000

:root{
--primary-color:red;
--secondary-color:blue;

}

root element match the top most element in a web document(tree structure) so when creating variables in root it can be accessed anywhere inside the dom(Document Object Model)
--primary-color,--secondary-color are variablels.We can reuse this elements by the following code

div{
color:var(--primary-color);
background-color:var(--secondary-color);
}

this selects --primary-color to all elements with a div parent and background-color to --secondary-color

What is the use of UseMemo

john — Sat, 15 Jan 2022 17:18:05 +0000

useMemo is a memorise hook that avoid rendering a Component if there is no change in props
let's take an example when a parent child renders all of it's children component will render but we can avoid rendering of children if there is no change in the props by wrapping
it with a React.useMemo hook

What is React must be in scope??

john — Sat, 15 Jan 2022 16:20:38 +0000

what is the use of import React from 'react'

Every React component is compiled into React.createElement('tagName',{props},value)
if React is not imported then it will show an error 'React must be in scope'

How to start with Open Source

john — Mon, 03 Jan 2022 15:43:51 +0000

Is opensourcing means coding

Absolutely not, anyone want to contribute to an open source project can change documentation and learn how to opensource
allmost 28 percent of contriubtions are of docs change and updation not related to programming

How to start opensourcing

let's take a look at firstcontributions/first-contributions this project just adds your profile to contributors list when you make a pr for that carefully read README.md in the project section

FILES

always when contributing to a project read the

README.md file , CONTRIBUTING_GUIDLINES ,CODE_OF_CONDUCT if available
this pops some idea about the project in your mind
that's all you can contribute to opensource