DEV Community: Hosein Pouyanmehr

Set key-value on JS Object!

Hosein Pouyanmehr — Thu, 17 Jul 2025 17:09:43 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

View source on GitHub.

About this post

In this post, we’ll build a utility to handle adding or updating key-value pairs on an object — cleanly and flexibly! It’s a powerful, reusable tool to include in your projects. We'll also address common edge cases to ensure the final result is robust and production-ready.

JavaScript Limitations When Setting Key-Value Pairs on an Object
Utility: setKeyValueOnObject()

JavaScript Limitations When Setting Key-Value Pairs on an Object

By default, when you set a key-value pair on an object in JavaScript, it first checks if the key exists. If it doesn't, the key is added and the value is assigned. If the key does exist, the old value is simply replaced.

However, in real-world scenarios, you might want more control — such as extending the existing value, appending to it, or ignoring the update entirely. Handling these kinds of cases manually can become repetitive and error-prone, especially when dealing with complex or non-primitive values.

That’s where a reusable utility comes in handy. Let’s explore the utility and its capabilities in the next section.

Utility: setKeyValueOnObject()

Note: I’m going to import the isPlainObject utility we discussed in this post.

Here’s the isPlainObject code:

export const isPlainObject = (value: unknown): value is Record<string, unknown> => 
  typeof value === 'object' && value !== null && !Array.isArray(value);

And here’s the JavaScript utility to properly handle both add and update operations!

import { isPlainObject } from './isPlainObject';

type UpdateMode = 'append' | 'replace' | 'extend' | 'ignore';

interface Options {
  decodeURI?: boolean;
  onConflict?: UpdateMode;
  flatArraysOnAppend?: boolean;
  removeArrayDuplicatedValues?: boolean;
}

export const setKeyValueOnObject = <
  T extends object,
  K extends keyof T,
  V = unknown
>(
  obj: T,
  key: K,
  value: V,
  options: Options = {}
): T & Record<K, V> => {
  const {
    decodeURI = false,
    onConflict = 'replace',
    flatArraysOnAppend = false,
    removeArrayDuplicatedValues = false,
  } = options;

  const newValue =
    decodeURI && typeof value === 'string'
      ? decodeURIComponentSafe(value)
      : value;

  const hasKey = key in obj;
  const current = obj[key as keyof T] as V | undefined;

  if (hasKey) {
    if (onConflict === 'ignore') return obj as T & Record<K, V>;

    if (current !== newValue) {
      if (onConflict === 'append' && Array.isArray(current)) {
        let appended = [...current, newValue];
        if (flatArraysOnAppend) appended = appended.flat();
        if (removeArrayDuplicatedValues)
          appended = Array.from(new Set(appended));

        return { ...obj, [key]: appended } as T & Record<K, V>;
      }

      if (
        onConflict === 'extend' &&
        isPlainObject(current) &&
        isPlainObject(newValue)
      ) {
        return { ...obj, [key]: { ...current, ...newValue } } as T &
          Record<K, V>;
      }

      if (onConflict === 'replace') {
        return { ...obj, [key]: newValue } as T & Record<K, V>;
      }
    }

    return obj as T & Record<K, V>;
  }

  return { ...obj, [key]: newValue } as T & Record<K, V>;
};

const decodeURIComponentSafe = (v: string): string => {
  try {
    return decodeURIComponent(v);
  } catch {
    return v;
  }
};

Explanation:

decodeURI is useful when working with URL search parameters.
onConflict lets you control what happens if the key already exists. Options include:
- 'replace' (default): overwrite the existing value.
- 'append': merge values into an array.
- 'extend': shallow-merge plain objects.
- 'ignore': skip the update if the key exists.
flatArraysOnAppend is helpful when the new value is an array and you want to flatten the result. For example: if arr: [1] is updated with [2, 3], the result will be arr: [1, 2, 3].
removeArrayDuplicatedValues ensures that appended arrays don’t contain duplicate values.

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Javascript plain object!

Hosein Pouyanmehr — Sat, 12 Jul 2025 08:21:23 +0000

You can read about code-pool concepts on this link.

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

About this post

In this post, we’ll create a utility to ensure a given value is an actual object—not null or an array. This will prevent unexpected behavior.

What is a plain object in JavaScript?
Utility: isPlainObject()

What is a plain object in JavaScript?

JS is somewhat weird in its nature. As you may know, not only objects but also null and arrays have the type object. If you don’t believe me, try running the following code:

console.log(typeof null);

console.log(typeof []);

This behavior can lead to unpredictable issues. For example, when you create a function to merge two objects, if you don’t ensure the inputs are actually objects, you may encounter errors or unexpected results. The following function helps you verify that your input is a real object.

Utility: isPlainObject()

Here it is, simple and straightforward.

export const isPlainObject = (value: unknown): value is Record<string, unknown> => 
  typeof value === 'object' && value !== null && !Array.isArray(value);

You can find the code and useful JSDoc at this GitHub link.

React hook to get device details!

Hosein Pouyanmehr — Mon, 07 Jul 2025 07:40:38 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

View source on GitHub.

About this post

In this post, we'll create a custom hook to retrieve device-related information in a React or Next.js project. While it will be minimal, it will provide you with the essential data needed to manage your application's functionality and UI effectively.

About code pool
When to use?
Device Details Hook

About code pool

I decided to create a reusable collection of bare UI components and generic functions that I believe can be more useful—if not better—than a standard starter kit. While a starter kit may fit all your needs in every aspect, this is often rare. In most cases, you will encounter many unnecessary modules, and over time, you might find the structure too rigid to implement your desired changes and patterns.

With the SOC (Separation of Concerns) convention in mind, we will enhance our assets and confidently create a starter for our project in no time by selecting only the usable components and utilities!

I definitely believe that re-inventing the wheel isn't wise, but relying solely on an all-in-one solution can limit your ability to identify and solve problems. I think it's important to strike a balance between using ready-to-use assets and creating your own solutions, as this approach can help you improve your skills over time. Consider each module in the "code pool" series as a wheel that is functional and open to improvements and customizations!

When to use?

You can use this hook in both React and Next.js projects. However, keep in mind that in Next.js, you'll need to add the use client directive at the beginning of the module. This utility is especially useful if you need to render different UI elements or run specific functions based on the device type and its attributes.

Device Details Hook

Here’s a hook to retrieve device information in React or Next.js. You can customize it by adding, removing, or modifying methods to suit your needs!

import { useState, useEffect, useMemo, useCallback } from 'react';

const getDeviceInfo = () => {
  const ua = navigator.userAgent;
  const isAndroid = /Android/i.test(ua);
  const isIOS = /iPad|iPhone|iPod/.test(ua);
  const isIpad = /iPad/.test(ua);
  const isMobile = isAndroid || isIOS;
  const isTablet = isIpad || (isAndroid && !/Mobile/.test(ua));

  return { isAndroid, isIOS, isIpad, isMobile, isTablet };
};

export const useDeviceDetails = () => {
  const [dimensions, setDimensions] = useState(() => ({
    width: window.innerWidth,
    height: window.innerHeight
  }));

  const handleResize = useCallback(() => {
    setDimensions({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize, { passive: true });
    return () => window.removeEventListener('resize', handleResize);
  }, [handleResize]);

  const deviceInfo = useMemo(() => {
    const { width, height } = dimensions;
    const { isAndroid, isIOS, isIpad, isMobile, isTablet } = getDeviceInfo();

    return {
      isMobile,
      isAndroid,
      isIOS,
      isIpad,
      isTablet,
      isDesktop: !isMobile && !isTablet,
      orientation: width > height ? 'landscape' : 'portrait',
      isLandscape: width > height,
      isPortrait: height > width,
      aspectRatio: width / height,
      pixelRatio: window.devicePixelRatio || 1,
      touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
      screenWidth: window.screen.width,
      screenHeight: window.screen.height,
      width,
      height
    };
  }, [dimensions]);

  return deviceInfo;
};

This hook will return various details about the device. To use it, simply call the useDeviceDetails() hook and destructure the returned values.

Here’s a breakdown of the output:

isMobile: Indicates whether the device is a mobile device.
isAndroid: Indicates whether the mobile device runs on Android.
isIOS: Indicates whether the mobile device runs on iOS.
isIpad: Indicates whether the device is an iPad.
isTablet: Indicates whether the device is a tablet.
isDesktop: Indicates whether the device is a desktop.
orientation: Returns 'landscape' or 'portrait' based on width vs. height.
isLandscape: A boolean indicating if the width is greater than the height.
isPortrait: A boolean indicating if the height is greater than the width.
aspectRatio: The ratio of width to height.
pixelRatio: The device’s pixel density (window.devicePixelRatio).
touchSupport: A boolean indicating if the device supports touch input.
screenWidth: The physical screen width in pixels.
screenHeight: The physical screen height in pixels.
width: The current viewport width.
height: The current viewport height.

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Minimal alternative to `clsx`!

Hosein Pouyanmehr — Wed, 02 Jul 2025 13:24:43 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

About this post

In this post, we'll create a custom function for handling conditional classNames in your projects! It'll be minimal and let you forget about installing additional packages in most cases, as you can tailor it to your project needs.

About code pool
Why to use?
CX Utility

About code pool

With the SOC (Separation of Concerns) convention in mind, we will enhance our assets and confidently create a starter for our project in no time by selecting only the usable components and utilities!

Why to use?

Here are the main reasons to use this instead of clsx, classnames, and other similar npm packages:

It reduces at least one dependency!
It's customizable, allowing for interception or modifications if needed!

CX Utility

This function is a single module that handles all your multi-className concerns!

type ClassValue = string | boolean | null | undefined;
type ClassArgument = ClassValue | ClassValue[] | Record<string, any>;

export const cx = (...classes: ClassArgument[]): string => {
 const processedClasses: string[] = [];

 for (let i = 0; i < classes.length; i++) {
   const item = classes[i];

   if (!item) continue;

   if (typeof item === 'string' && item !== '') {
       processedClasses.push(item);
   } else if (Array.isArray(item)) {
     for (let j = 0; j < item.length; j++) {
       const nestedResult = cx(item[j]);
       if (nestedResult) {
         processedClasses.push(nestedResult);
       }
     }
   } else if (typeof item === 'object') {
     const keys = Object.keys(item);
     for (let k = 0; k < keys.length; k++) {
       const key = keys[k];
       if (item[key]) {
         processedClasses.push(key);
       }
     }
   }
 }

 return processedClasses.join(' ');
};

This will accept classes just as clsx or classnames do and return a single string at the end!

And here is a usage example:

...
  <div 
    className={cx(
      'bg-slate-50',
      'rounded-3xl',
      'overflow-hidden',
      'border-2 border-black-body',
      'my-2'
    )}
  />
...

I’ll be posting regularly on both my blog and LinkedIn—don’t miss out on the latest content. Be sure to follow along!

Hoisting in JavaScript

Hosein Pouyanmehr — Tue, 01 Apr 2025 14:12:08 +0000

This post was first published on my blog. You can read it at this link for a focused and better reading experience.

This article is also available in Persian here.

About this post

In this post, we will learn what JavaScript Hoisting is and how it works behind the scenes. We'll also cover its behavior in different cases.

Defenition of Hoisting in JavaScript
Types in Js Hoisting
- ‌Variable Hoisting
- Function Hoisting
- Class Hoisting
Why does hoisting exist in js?
References
Conclusion

Definition of Hoisting in JavaScript

Based on MDN Web Docs,

"JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code."

Source: MDN Hoisting

In simple terms, before code execution, the JavaScript engine will check your code in each scope and move the declaration to the beginning (by the beginning of a scope, you can think of the first lines of a module, a script, or the current function).

Based on this definition, and with the power of hoisting in JavaScript, you can declare a variable after it has been used or initialized!

This behavior makes us able to write something like this:

a = 1; // Assignment

console.log(a); // console: 1

var a; // Declaration

And before execution, it became something like this:

var a; // Declaration moved to the top!
a = 1; // Assignment

console.log(a); // console: 1

You're now familiar with the general definition of hoisting. Let's dig deep into that!

Type

Before checking different aspects of types, it is important to note again that Hoisting only happens on declarations and not initializations. This means that variable declarations are hoisted, but the initialization happens where the assignment occurs.

To understand this better, pay attention to the following examples:

var a = 1;
var b = 2;

console.log(`a=${a} and b=${b}`); // result is: a=1 and b=2

var a = 1;

console.log(`a=${a} and b=${b}`); // result is: a=1 and b=null

var b = 2;

In the second example, hoisting happens as the console log result is not undefined. However the assignment to the variable b happens after logging the statement to the console. So, in this case b is hoisted to the top but has no value or is null at the logging line because the variable assignment is on line 5 and after using the variable.

As we have different methods of variable declaration in JS, knowing about edge cases and hoisting behavior in different circumstances is crucial.

Variable Hoisting

In JavaScript, we can define variables with different keywords, such as var, let, or const. All three get hoisted to the top. The difference is in the initialization process.

Hoisting of var

If you declare a variable, JS will hoist that to the beginning of the current scope. Up to this point, all examples are written using the var keyword. If you need a fresher, check the #defenition section example again.

Using the var declaration gets hoisted to the top and any usage of that variable before initialization, leads to the null value.

console.log(a); // console: null

a = 1;
var a;

Hoisting of let

A variable declared with the let keyword gets hoisted as well. But if you use the variable before declaration, the result will be a ReferenceError at the runtime.

console.log('hi');

a = 1;
let a;

This is the result after execution:

hi

ReferenceError: Cannot access 'a' before initialization

Hoisting of const

A variable declared with the const keyword gets hoisted like previous ones. If you use the variable before the declaration it results in a syntax error and the code won't be executed at all.

console.log('hi');

a = 1;
const a;

You get the following error immediately after running the above piece of code:

SyntaxError: Missing initializer in const declaration

There is a phrase for this in official documents and it is "Temporal Dead Zone". They say that when you use a let or const variable before its initialization, it is in a temporal dead zone.

In simple terms, the "temporal dead zone" is the time between when a variable is created (hoisted) and when it is declared. Hoisting for let and const doesn't lead to instant memory allocation, so if you declare something on line 5 as an example, the memory allocation will happen when the execution reaches line 5. This gap is a "temporal dead zone". For the var keyword, however, the allocation happens at the hoisting time and there will be no gap.

Function Hoisting

Functions can get hoisted in JS. This is one of the hoisting benefits, where you can call your functions before defining them.

Function Declartion

A function declaration is fully hoisted. When you define a function independently using the function keyword in JS, you can call that before its declaration. Here's an example:

logOne(); // console: 1

function logOne() {
  console.log(1);
}

Function Expression

Function expressions also get hoisted as well, but you cannot call that before the assignment. If you do so, you'll face a TypeError at the runtime.

logOne(); // console: ReferenceError: Cannot access 'logOne' before initialization

const logOne = function() {
  console.log(1);
};

This rule will be the same for both named functions or arrow functions.

Class Hoisting

Classes are also hoisted, but you cannot use a class before declaration because of the "temporal dead zone". If you use a class before its declaration, you'll face a ReferenceError.

const myObj = new MyNumberClass(); // console: ReferenceError: Cannot access 'MyNumberClass' before initialization

class MyNumberClass {
  constructor() {
    this.value = 1;
  }
}

Why does Hoisting exist in JS?

JavaScript parses the code before execution, and with hoisting, it can let the interpreter know about the existence of variables and functions. This can help the interpreter to:

Use functions before the declaration and be sure about their existence.
Make the code more flexible to write as declaration order doesn't matter. (Improve DX or Developer Experience in my book)

References

The provided article is a try to make the following resources' contents easier to understand and unified, an all-in-one hoisting learning resource. Check them out if you want!

Conclusion

Although hoisting is the default behavior of JavaScript, it actually is a weird way of interpreting the scripts. If a developer doesn't know hoisting or doesn't understand that completely, it may lead to issues and bugs in the application.
So to avoid headaches and issues, Always declare all variables at the top of the scope!

Hope you've enjoyed this article and extended your knowledge.

Split your translations in `next-intl` in a nice way!

Hosein Pouyanmehr — Mon, 26 Aug 2024 10:45:34 +0000

TL;DR
You can install next-intl-split instead of reading this article, it is a tiny package that can save you some time.

What is this post about?

In a Next.js application, translating your content into different languages can be easily done using next-intl. However, after a while, you may find the translation files too long and hard to maintain and update. In this post, we'll look at an approach to keep the translation files modular and clean and put them into multiple JSON files. You can also start reading from this section if you know how to install and set up next-intl.

Prerequisite
How the solution is going to work?
Implementation
Conclusion

Prerequisite

You need to understand next.js and i18n concepts such as app router and locale before reading this article. Also, having experience with next-intl is necessary, if you don't know how it works, please check its documentation first. I will use TypeScript in this project, but you can follow the steps for a JavaScript project, just ignore the types.

How the solution is going to work?

If you have tried next-intl before, as your application grows, you can find it difficult to keep your translation JSON files clean. Although the next-intl provides a built-in solution for splitting and separating your translations, I found that a bit hard to work with as you may end up with duplicated names or long prefixes for simple keys. So here are some downsides of the next-intl splitting approach:

You may not be able to use namespace as before.
You may need to prefix simple keys like title in a way like homePageHeroTitle to keep it unique
You have to import each translation file individually in the messages loader which can be tedious.

We're going to create some utilities and I'll explain them to you. Using these utilities (or the next-intl-split package) helps you to keep the main functionality and benefits of next-intl as well as separate your translation files properly into multiple smaller and cleaner files.

Using this approach, we're going to create folders that end with an index.json translation file in them (like /src/i18n/dictionaries/en/home/hero/index.json). The loadI18nTranslations function will load them all in one go and merge them so you can use namespace and also use the benefits of dot notation.

Implementation

We're going to create a next.js and next-inlt app first and then implement the utility in the last steps.

Step One: Creating a Next.js app

Run npx create-next-app command in your desired path to create a new next.js app.

here is my config for installation:

After installation, I'll clean useless files and try to keep the app as short as possible.

I've deleted the public folder
Fav Icon in /src/app/
All css styles in /src/app/globals.css except for @ imports of tailwind.
I've also changed the /src/app/page.tsx file to

export default function Home() {
  return (
    <main>
      <h1>Hello!</h1>
    </main>
  )
}

Now we're done with the Next.js setup.

Step Two: Adding `next-intl` and Config it

To add next-int run the following command:

npm i next-intl

Note: I'm goin to follow the with-i18n-routing approach of next-intl. Feel free to follow your preferred one. The solution provided in this for article splitting will work with all approaches.

Then, create at least two locale translation files. In this step, we'll follow the next-intl structure to properly set it up. So, I'm gonna create an i18n folder and another dictionaries folder in it. After that, I'll add en.json and fa.json for English and Persian translations.

So this is the path: /src/i18n/dictionaries/ and this is the content for en.json:

{
  "home": {
    "hero": {
      "title": "Hello!"
    }
  }
}

and this is for the fa.json:

{
  "home": {
    "hero": {
      "title": "سلام!"
    }
  }
}

We're done with the translations, now we need to update the next.config.mjs file (or next.config.js file) to use next-intl plugin. This is the updated content for next.config.mjs:

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin(
  './src/i18n/i18n.ts'
);

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Note: I've changed the default path for the i18n.ts file and for that, I did add the new path in the createNextIntlPlugin function. Next, I'm going to add an i18n.ts file in the /src/i18n/ path. You can follow the next-intl documentation for changing or keeping the default paths.

After updating the next config file, Add the following utility to the /src/i18n/i18n.ts module. (You can put this file in /src/app as well, If you did, please keep it in mind to remove the path in the next.config.mjs file)

This will be the content for i18n.ts module:

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

export const locales = ['en', 'fa'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`./dictionaries/${locale}.json`)).default,
  };
});

Here, we read the content of the JSON files based on the user locale and return the proper messages object. Also, I've exported the locales for further use.

After adding i18n.ts, We'll add a middleware to catch and redirect user properly in routes. Add this file in /src/middleware.ts. It should be in this path and you cannot customize the path for this one.

import createMiddleware from 'next-intl/middleware';

import { locales } from '@/i18n/i18n';

export default createMiddleware({
  locales,
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/', '/(en|fa)/:path*']
};

I imported the previously defined locales array to have a single source of truth for that.

Now we just need to change the app router structure from /src/app/... to /src/app/[locale]/.... This help us to have control over the app locale from the very top level. You can see the difference in this picture:

Then, add the Provider to the /src/app/[locale]/layout.tsx. This will provide the messages all over the application. So the layout module will change to something like this:

import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

import './globals.css';

export const metadata = {
  title: 'Next Intl Split',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();

  return (
    <html dir={locale === 'en' ? 'ltr' : 'rtl'} lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

And finally, we can use our dictionaries in /src/app/[locale]/page.tsx like this:

import { getLocale, getTranslations } from 'next-intl/server';

export default async function Home() {
  const currentLocale = await getLocale();
  const translate = await getTranslations({
    locale: currentLocale,
    namespace: 'home.hero',
  });

  return (
    <main>
      <h1>{translate('title')}</h1>
    </main>
  );
}

Step Three: Adding navigation

To navigate properly between routes of your application, add the following utility in the /src/i18n/navigation.ts.

import { createSharedPathnamesNavigation } from 'next-intl/navigation';

import { locales } from '@/i18n/i18n';

export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation({ locales });

Now lets add some buttons to the home page to be able to change the locale. This is the updated page.tsx component content:

import { getLocale, getTranslations } from 'next-intl/server';

import { locales } from '@/i18n/i18n';
import { Link } from '@/i18n/navigation';

export default async function Home() {
  const currentLocale = await getLocale();
  const translate = await getTranslations({
    locale: currentLocale,
    namespace: 'home.hero',
  });

  return (
    <main>
      <h1>{translate('title')}</h1>
      <div className='flex gap-2'>
        {locales.map((locale) => (
          <Link
            className={`px-2 py-1 ${
              locale === currentLocale ? 'bg-slate-300' : 'border-2'
            }`}
            key={locale}
            href='/'
            locale={locale}
          >
            {locale}
          </Link>
        ))}
      </div>
    </main>
  );
}

Step Four: Split translations

First update the dictionaries file to something like this image:

Please keep this in mind that you can separate your translations in your preferred way. Just be sure each folder end up with an index.json file.

Then add the following utility in /src/i18n/loader.ts or you can install its package by npm i next-intl-split

import fs from 'fs';
import path from 'path';

const addNestedProperty = (obj: { [key: string]: any }, keys: string[]) => {
  let current = obj;

  for (const key of keys) {
    if (!current[key]) {
      current[key] = {};
    }
    current = current[key];
  }

  return { obj, lastKey: current };
};

export const loadI18nTranslations = (
  dictionariesPath: string,
  locale: string
) => {
  const relativePath = dictionariesPath + locale;
  const absolutePath = path.join(process.cwd(), relativePath);

  let translations = {};

  try {
    const files = fs.readdirSync(absolutePath, { recursive: true });
    files.forEach((file) => {
      if (typeof file === 'string' && file.endsWith('.json')) {
        const fileParents = file
          .split(path.sep)
          .filter((parent) => parent !== 'index.json');
        const filePath = path.join(absolutePath, file);
        const fileTranslations = JSON.parse(fs.readFileSync(filePath, 'utf-8'));

        // Object {}
        translations = {
          ...translations,
        };

        const { lastKey } = addNestedProperty(translations, fileParents);

        Object.assign(lastKey, fileTranslations);
      }
    });
  } catch (error) {
    console.error(
      'The following error occured in loader in next-intl-split.',
      error
    );
  }

  return translations;
};

Explanation: The above code look for the index.json files in the provided path based on app locale. At the end, it'll merge the json translation files and provide a single JSON file.

After creating this loader (or installing the package using next-intl-split command) in the /src/i18n/i18n.ts utility, implement this changes:

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

// import { loadI18nTranslations } from 'next-intl-split'; // Use this if you've installed the package
import { loadI18nTranslations } from '@/i18n/loader';

export const locales = ['en', 'fa'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  const messages = loadI18nTranslations('/src/i18n/dictionaries/', locale);

  return {
    messages,
  };
});

NOTE: The path provided to the loadI18nTranslations utility must be absolute path to the dictionaries folder so pay attention to that if you have issues in detecting the translations. (Also you can use relative path but keep in mind to start from the source folder ./src/i18n/dictionaries/ in my case)

Conclusion

Congrats! You're now able to separate your translations as you want. The above utility help you to have translation split ability in addition to all next-intl benefits.
Also, if you use translations frequently, you can install next-intl-split to avoid repetition and save time.

☕ Coffee Time Reads - Ideal Folder Structure for React Projects

Hosein Pouyanmehr — Sun, 25 Feb 2024 19:24:24 +0000

What is this post about?

In this post, we're going to see what are the best practices to have a clean, maintainable and also scalable react project. Rather than make a list and some diagrams, I'm going to share the methodology over a project, tips and tricks about how to think about your project structure.

Why folder structure matters?

You can't have a clean overview of your project when everything is messy. In the programming world, being organized helps you to keep your speed at a high and acceptable level, make the overall project map clean and understandable so you can make faster decisions, and have your ideal quality simultaneously. Briefly, you will be able to:

Have a good overview of your project.
Avoid duplication as you can see your previous works better and cleaner.
Onboard another developer to your project much faster.
Predict and provide yourself for scaling.
Refactor and maintain your project at ease.

Keep these things in mind before your decisions

😵 Don't overthink about folder structure.

In the past, when I was about to start my first project, I can remember a lot of overthinking about the structure, about the folder and file names. After all, the truth is, do not think about your project for more than a couple of minutes. Even if you know there will be many things in your app, there is no need to waste your time creating a folder as a placeholder for future stuff. Nothing will happen if you put the files in the wrong place or name them incorrectly, you can always change them later.

💡 Inspire from similar open source projects

If your mind is locked up and you can't have a clear overview of your project, try to search for similar projects. Most of the time, you can find some GitHub repositories containing a template or a similar project. Look at different folders and file names and think for a moment if you'll have something like that(or not). Keep it in mind that you are looking at those projects to inspire and make your mind map of your project cleaner, So don't copy!

🤸‍♀️🤸‍♂️ Be flexible to the changes

You can create a tight structure and development methodology. First, it may seem perfect, but there is no guarantee that you won't change that anytime later. This is another good reason to remember "not waste your time overthinking about a tight project structure".
Good structures are flexible ones, and flexible project structures shape as you proceed. Two different projects can have two different structures that suit them.

⚪ Think GENERIC

Don't label everything specifically at the beginning. Of course, this could sound too obvious but for now, think about a button for a form confirmation, you can call that the "user sign up button" or "user sign in button" and create two buttons at the end of the day, but in general, it is a "submit button".

🏁 Start Your Project

That's all you need to keep in mind before starting your projects. As I mentioned, your project structure grows as you proceed. Creating a lot of placeholder folders and files at the beginning just makes it hard for you to change your approaches (if needed) and also isn't that useful.
It's important to start and use your energy toward your goals. These kinds of issues will fade out after a while.

React Markdown + JOY UI

Hosein Pouyanmehr — Sat, 27 Jan 2024 17:14:46 +0000

About this post
Using Markdown in your project
Using Joy UI in your project
About "jui-markdown" package
Some of "jui-markdown" features
Package usage
Documentations

About This Post

This post will give you an overview of Joy UI and also Markdown. Also, it'll help you render the markdown fast and nicely in your React and Joy UI projects.

Using Markdown in your project

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. (Wikipedia)

Using MD or MDX you can write rich formatted content real quick, and it's pretty readable even before you convert it to HTML. There are also some other benefits that you can read about them as well.

Using Joy UI in your project

Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box. (MUI)

Joy UI is a less complicated alternative to the MUI. It's highly customizable, easy to learn, and developer-friendly.

About "jui-markdown" package

"jui-markdown" uses "markdown-to-jsx" and "Joy UI". I found these two working together really simple and nice. This package will be great for you if you use Joy UI (From MUI). Also it is really lightweight, about just 10.00Kb (Unpacked size is 58.1Kb).

Some of "jui-markdown" features

Headings
Code highlight and language detection
Inline code highlight
Blockquote component
Joy UI button component support
Nice Links
Flexible and Overridable

Package usage

The package is available on npm (and yarn).

To install it, simply run:

# with npm
npm i jui-markdown

# with yarn
yarn add jui-markdown

Then pass the markdown as children:

import React from 'react';
import { JuiMarkdown } from 'jui-markdown';
// You can also use
// import JuiMarkdown from 'jui-markdown';
// But the first approach is recommended.

const App = () => {
  return <JuiMarkdown>{`# Hello markdown!`}</JuiMarkdown>;
};

export default App;

Docs

To get more familiar with this package you can read the documentation on GitHub or NPM.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Add image to draft-js editor (no plugin)

Hosein Pouyanmehr — Wed, 12 Jul 2023 14:51:05 +0000

What is this post about?

If you are implementing an editor, you probably need to add different sorts of media to your content, like images, audio, or video. The process of adding a non-text block (atomic block) to the draft-js is similar for all sorts of media. We'll learn how to work with atomic blocks and how to add image support to the editor.

Requirements
Installation
Create Editor Component
Add Placeholder
Steps Overview
Add Toolbar
Handle Adding Image
Create Image Component
Create The Decorator
Add Decorator to the State
Result and Demo

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use
draft-js and contenido packages in this tutorial.

Draft JS and Contenido

Draft-js is a rich text editor framework for React. (Read More)

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes. Read this post to get familiar with contenido.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).

# typescript
npx create-react-app draft-text-alignment --template typescript

# javascript
npx create-react-app draft-text-alignment

After the installation is done, install draft-js and contenido with this command:

# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

Javascript:

// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const MediaEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

To make the editor much more visible add the border styles to the div:

...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...

To have the styles work properly import contenido styles into your App.tsx (or _app.tsx in next.js).

...
// Styles
import 'contenido/dist/styles.css';
...

Add Placeholder

Also adding a placeholder can be useful, so:

...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
         placeholder='Write here...'
        />
...

Steps Overview

Before implementing the image support, I like to clarify each step of adding the media to the editor.

In draft-js, the non-text block will be an atomic block. By default, the editor core only knows about the text and has no idea about the non-text blocks. When we add an atomic block to the editor, it'll ignore it until we say how to render that. To show the editor to render an atomic block, we need to decorate that block. Decorating in draft js is the process of finding and clarifying the final shape of an atomic block.

For example, to add an image block to the editor:

We add an atomic block with the 'image' type (or whatever keyword you like).
Then we define a function to find entities with 'image' type.
Finally we'll use our custom Image component to render that.

Add Toolbar

Now, it's time to add the button to the toolbar.

Added lines are the same for both Javascript and Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Using contenido, we can easily have the necessary utilities for the process. addImage utility helps us to add an atomic block to the editor with the type of 'image' and then using createDecorator in combination to the image component and the findEntitiesOf('image') leads to rendering images properly and in the way we like.

// src > components > Editor.tsx
....
import {
  Editor,
  addImage, // Import this utility
  createDecorator, // Import this utility
  findEntitiesOf, // Import this utility
} from 'contenido';
...

So the editor component will be like this:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Handle Adding Image

Let's update the button event handlers to add an image to the editor.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // Utilities
  const handleAddImage = () => {
    const imageProps = {
      src: 'https://picsum.photos/200/200',
      alt: 'Random image',
      style: { width: 200, height: 200 },
    };

    addImage(editorState, setEditorState, imageProps);
  };

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
          onMouseDown={(e) => {
            e.preventDefault();

            handleAddImage();
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Note: In this example, we'll use hardcoded details for our image. In a real-world scenario, You can show a pop-up where the user enter the data, and then you can pass those to the handler.

If there is an upload phase in your application, you need to upload the image to the server first and then pass the link to that to the editor.

Create Image Component

Up to this point, The added image to the editor won't be visible as there is no decorator. To decorate the added media, we'll create the image component first.

JavaScript:

// src > components > Image.jsx
const Image = (props) => {
  if (blockType.blockType === 'image') {
    const { alt, src, style } = props;

    return <img alt={alt} src={src} />;
  }

  return <p>The atomic type is not supported in this demo!</p>;
};

export default Image;

TypeScript:

// src > components > Image.tsx
// Types
import type { FC } from 'react';
import type { DecoratorComponentProps, ImageAttributes } from 'contenido';

const Image: FC<DecoratorComponentProps> = (props) => {
  if (props.blockType === 'image') {
    const { src, alt, style } = props as ImageAttributes;
    if (src && alt)
      return (
        <img alt={alt} src={src} width={style.width} height={style.height} />
      );
  }
  return <p>The atomic type is not supported in this demo!</p>;
};

export default Image;

Create the Decorator

As we mentioned earlier, Decorating in draft js is the process of finding and clarifying the final shape of an atomic block.

This is how the decorator will look like (For both TS and JS):

// src > components > Editor.tsx
// Custom Components
import Image from './Image.tsx';

...
const decorators = createDecorator([
    {
      component: Image,
      strategy: findEntitiesOf('image');,
    },
  ]);
...

It's an array an you can have multiple decorators for different types of atomic blocks.

Add Decorator to the State

We have all and it's time to put them together to see the result.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addImage, createDecorator, findEntitiesOf } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Components
import Image from './Image.tsx'

// Custom Types
export interface MediaEditorProps {}

const MediaEditor: FC<MediaEditorProps> = (props) => {
  // Decorator
const decorators = createDecorator([
    {
      component: Image,
      strategy: findEntitiesOf('image');,
    },
  ]);

  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty(decorators));

  // Utilities
  const handleAddImage = () => {
    const imageProps = {
      src: 'https://picsum.photos/200/200',
      alt: 'Random image',
      style: { width: 200, height: 200 },
    };

    addImage(editorState, setEditorState, imageProps);
  };

  return (
    <div>
      <div>
        <button
          style={{
            minWidth: '2rem',
            padding: '0.5rem',
            borderRadius: '0.5rem',
            border: 'none',
            cursor: 'pointer',
            textTransform: 'capitalize',
          }}
          onMouseDown={(e) => {
            e.preventDefault();

            handleAddImage();
          }}
        >
          Add Image
        </button>
      </div>
      <div
        style={{
          border: '1px solid #252525',
          borderRadius: '0.5rem',
          padding: '0.5rem 1rem',
        }}
      >
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Result

This is the result:

You can also check the live demo!

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Draft-js text alignment in less than 5 minutes

Hosein Pouyanmehr — Fri, 23 Jun 2023 17:23:40 +0000

What is this post about?

Text alignment is one of the essential functionalities of an editor. Using the text alignment, the user can easily set the horizontal position of the context. If you did experience implementing alignment in draft-js you know that it can be time-consuming. In this tutorial, We'll implement text alignment utility in draft-js with the help of contenido.

Requirements
Installation
Create Editor Component
Add Placeholder
Add Toolbar Buttons
Result and Demo

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use
draft-js and contenido packages in this tutorial.

Draft JS

Draft-js is a rich text editor framework for React.

React More: A brief introduction to draft-js

Contenido

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes. Read this post to get familiar with contenido.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).

# typescript
npx create-react-app draft-text-alignment --template typescript

# javascript
npx create-react-app draft-text-alignment

After the installation is done, install draft-js and contenido with this command:

# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

Javascript:

// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const TextAlignmentEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

To make the editor more visible add the border styles to the div:

...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...

Add Placeholder

Also adding a placeholder can be useful, so:

...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
...

Add Toolbar Buttons

Now, it's time to add the buttons to the toolbar. First we will create an array of buttons to map them in the toolbar. After that,
we use JS map to render the buttons.

Added lines are the same for both JavaScript and TypeScript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

To toggle between text alignments, we'll use the toggleTextAlign utility of contentio and pass the alignment key to that..

// src > components > Editor.tsx
....
import {
  Editor,
  toggleTextAlign // Import this utility
} from 'contenido';
...

The editor needs a function to properly style the alignment. To do so, import the blockStyleFn from contenido and pass it as an
attribute to the editor component. Also the default keys for alignment starts with text-align- in contenido.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, blockStyleFn, toggleTextAlign } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              toggleTextAlign(
                editorState,
                setEditorState,
                `text-align-${button.title}`
              );
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
          blockStyleFn={blockStyleFn}
        />
      </div>
    </div>
  );
};

To have the alignment work properly import contenido styles into your App.tsx (or _app.tsx in next.js).

...
// Styles
import 'contenido/dist/styles.css';
...

The editor basic alignment should work properly up to this point, but as an improvement we can change the style of selected
button to illustrate the difference. There is also a function for each of these alignments to find out if it is the selected
alignment or not.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import {
  Editor,
  blockStyleFn,
  toggleTextAlign,
  isTextRightAligned,
  isTextCenterAligned,
  isTextLeftAligned,
  isTextJustifyAligned,
} from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left', checker: isTextLeftAligned },
  { title: 'center', checker: isTextCenterAligned },
  { title: 'right', checker: isTextRightAligned },
  { title: 'justify', checker: isTextJustifyAligned },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              backgroundColor: button.checker(editorState)
                ? '#4cb5f5'
                : 'rgba(125, 125, 125, 0.25)',
              color: button.checker(editorState) ? '#fff' : 'inherit',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              toggleTextAlign(
                editorState,
                setEditorState,
                `text-align-${button.title}`
              );
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
          blockStyleFn={blockStyleFn}
        />
      </div>
    </div>
  );
};

Result

This is the result:

You can also check the live demo.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

Inline styles in draft-js

Hosein Pouyanmehr — Fri, 26 May 2023 10:17:12 +0000

What is this post about?

This tutorial is about inline styles in draft-js and for your. In this post, You will learn how to implement an editor with basic and custom inline styles. This tutorial is helpful if you're new to draft-js and web editors or looking for a way to implement an editor for your comment box or similar use cases.

Requirements
Installation
Create Editor Component
Add Placeholder
Add Toolbar Buttons
Custom Inline Styles
Result and Demo

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use draft-js and contenido packages in this tutorial.

Draft JS

Draft-js is a rich text editor framework for React. You can read this post to get familiar with that.

Contenido

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).

# typescript
npx create-react-app draft-inline-styles --template typescript

# javascript
npx create-react-app draft-inline-styles

After the installation is done, install draft-js and contenido with this command:

# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface InlineStylesEditorProps {}

const InlineStylesEditor: FC<InlineStylesEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

Javascript:

// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const InlineStylesEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};

to make the editor much more visible add the border styles to the div:

...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...

Add Placeholder

Also adding a placeholder can be useful, so:

...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
         placeholder='Write here...'
        />
...

Add Toolbar Buttons

Now, it's time to add the buttons to the toolbar. First we will create an array of buttons to map them in the toolbar. After that, we use JS map to render the buttons.

Added lines are the same for both Javascript and Typescript:

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface InlineStylesEditorProps {}

const buttons = [
  { title: 'Bold' },
  { title: 'Italic' },
  { title: 'Underline' },
  { title: 'Line Through' },
  { title: 'Overline' },
  { title: 'Sup' },
  { title: 'Sub' },
];

const InlineStylesEditor: FC<InlineStylesEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

For all of these buttons, there is a utility in contenido so we just need to import and add the handler for each button.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import {
  Editor,
  initialStyleMap,
  toggleBold,
  toggleItalic,
  toggleLineThrough,
  toggleOverline,
  toggleSub,
  toggleSup,
  toggleUnderline,
} from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface InlineStylesEditorProps {}

const buttons = [
  { title: 'Bold', handler: toggleBold },
  { title: 'Italic', handler: toggleItalic },
  { title: 'Underline', handler: toggleUnderline },
  { title: 'Line Through', handler: toggleLineThrough },
  { title: 'Overline', handler: toggleOverline },
  { title: 'Sup', handler: toggleSup },
  { title: 'Sub', handler: toggleSub },
];

const InlineStylesEditor: FC<InlineStylesEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              button.handler(editorState, setEditorState);
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          customStyleMap={initialStyleMap}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

The editor basic inline style tools should work properly up to this point, but as an improvement we can change the style of selected button to illustrate the difference. There is also a function for each of this inline styles to find out if it is the selected style or not.

// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import {
  Editor,
  initialStyleMap,
  isBold,
  isItalic,
  isLineThrough,
  isOverline,
  isSub,
  isSup,
  isUnderline,
  toggleBold,
  toggleItalic,
  toggleLineThrough,
  toggleOverline,
  toggleSub,
  toggleSup,
  toggleUnderline,
} from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface InlineStylesEditorProps {}

const buttons = [
  { title: 'Bold', handler: toggleBold, checker: isBold },
  { title: 'Italic', handler: toggleItalic, checker: isItalic },
  { title: 'Underline', handler: toggleUnderline, checker: isUnderline },
  { title: 'Line Through', handler: toggleLineThrough, checker: isLineThrough },
  { title: 'Overline', handler: toggleOverline, checker: isOverline },
  { title: 'Sup', handler: toggleSup, checker: isSup },
  { title: 'Sub', handler: toggleSub, checker: isSub },
];

const InlineStylesEditor: FC<InlineStylesEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              backgroundColor: button.checker(editorState)
                ? '#4cb5f5'
                : 'rgba(125, 125, 125, 0.25)',
              color: button.checker(editorState) ? '#fff' : 'inherit',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              button.handler(editorState, setEditorState);
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          customStyleMap={initialStyleMap}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};

Custom Inline Styles

Although, contenido have a utility for the most common use cases but you can also have your custom inline styles. As an example, You can have buttons to change the text transformations or to change the text font or background color. We will add a support for the background color to our editor to have an example of inline style customization for draft-js as well. Approach will be the same for all valid CSS styles.

First we set a key for each of our colors:

...
const HIGHLIGHT = 'HIGHLIGHT';
...

Then update the buttons array by importing toggleInlineStyle and hasInlineStyleOf from contenido (for Typescript we import State and StateHandler types as well):

Typescript:

const buttons = [
  { title: 'Bold', handler: toggleBold, checker: isBold },
  { title: 'Italic', handler: toggleItalic, checker: isItalic },
  { title: 'Underline', handler: toggleUnderline, checker: isUnderline },
  { title: 'Line Through', handler: toggleLineThrough, checker: isLineThrough },
  { title: 'Overline', handler: toggleOverline, checker: isOverline },
  { title: 'Sup', handler: toggleSup, checker: isSup },
  { title: 'Sub', handler: toggleSub, checker: isSub },
  {
    title: 'Highlight',
    handler: (editorState: State, stateHandler: StateHandler) =>
      toggleInlineStyle(editorState, stateHandler, HIGHLIGHT),
    checker: (editorState: State) => hasInlineStyleOf(editorState, HIGHLIGHT),
  },
];

Javascript:

const buttons = [
  { title: 'Bold', handler: toggleBold, checker: isBold },
  { title: 'Italic', handler: toggleItalic, checker: isItalic },
  { title: 'Underline', handler: toggleUnderline, checker: isUnderline },
  { title: 'Line Through', handler: toggleLineThrough, checker: isLineThrough },
  { title: 'Overline', handler: toggleOverline, checker: isOverline },
  { title: 'Sup', handler: toggleSup, checker: isSup },
  { title: 'Sub', handler: toggleSub, checker: isSub },
  {
    title: 'Highlight',
    handler: (editorState, stateHandler) =>
      toggleInlineStyle(editorState, stateHandler, HIGHLIGHT),
    checker: (editorState) => hasInlineStyleOf(editorState, HIGHLIGHT),
  },
];

The final step is to create a style map object and use it instead of the initialStyleMap. It's important to spread the initial one in order to keep the other styles functionality:

...
  const styleMap = {
    ...initialStyleMap,
    HIGHLIGHT: { backgroundColor: '#fdffb4' },
  };
...

and then replace it like this:

...
  <Editor
    editorState={editorState}
    onChange={setEditorState}
    customStyleMap={styleMap}
    placeholder='Write here...'
  />
...

Result

You can see the demo of this post on this link.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

A brief introduction to contenido (a draft-js lib)

Hosein Pouyanmehr — Fri, 19 May 2023 14:05:39 +0000

What is this post about?

Although you get a bunch of features out of the draft-js framework, there are still some issues that can affect your negatively. In this post, we'll check out the contenido library that helps you use draft-js efficiently and save the time.

What is a rich text editor?
Draft-js pros and cons
What is contenido?
Features of contenido
Why to use contenido?

What is a draft-js?

Draft-js is an open-source react rich text editor framework that allows you to build editors for your web application. With draft-js, you can almost create whatever you want as your editor features.

Draft-js pros and cons

These are the common draft-js benefits:

Almost quick setups for basic usage
You can have a highly customizable editor
You can build a full-feature RTE
You can convert its state to HTML, Raw Object, or even Markdown

And these are the common downsides:

Time-consuming if you want to build a full-featured editor
You may end up with a repetitive process
Its documentation isn't comprehensive
The plugin approach can make your package.json a bit ugly

What is contenido?

Draft-js has a lot of potential that can make your work outstanding. However most of the time, its downsides persuade the developers to choose another library for their project. As mentioned earlier, you may end up repeating yourself in a lot of similar situations and that leads you to ask why should I use my time incorrectly like this? If you have some experience in Redux, the feeling can be the same.
Redux on its own is a really powerful state management library, But the efforts, the time, the repetition, and the complexity can make you choose an alternative.

Contenido is something like redux-toolkit to redux. You can skip the repetitions and be out of the complexity, saving a lot of time for your other tasks and have a clean sight of what you're doing.

As the official documentation says:

Contenido is a library with a set of tools to help you create our own editor on top of draft-js without thinking about how to handle things.

Features of contenido

These are some of contenido's features. For each section you'll also have utilities to implement your desired style or functionality.

Inline Styles (Bold, italic, underline , ...) + Customization
Block Types (H1 to H6, OL, UL, Blockquote, ...) + Customization
Insertion (Media and File, Link) + Customization
Built-in Text Alignment
Counters and Limitation utilities

To see the complete list of its utilities checkout this page.

Why to use contenido?

Contenido will be your agent to handle stuff in building a rich react text editor. These are some of the key benefits of using contenido with draft-js:

Time Saver

Using contenido helps you save a lot of time. You don't need to write every single editor's behavior on yourself. In 99% of
situations there is a ready-to-use utility for you.

Simplicity

The job is done for you in contenido, and there is no complexity to ruin your focus or coding principles.

Light Weight and Tree Shakeable

Contenido is written in a modular way. Each utility has its module and there is no unusual connection between those modules which
leads to a very small import size.

Typescript

Contenido is written in typescript so unlike the draft-js you have the benefits of types as well.

Compatible with UI Libs

If you choose a ready-to-use text editor (even if it's on top of the draft-js), you should accept the incompatible components' appearances in your application. With contenido, you have the functionality and can completely mix it with your UI library like MUI, BootStrap, Tailwind or even your UI principles.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.

DEV Community: Hosein Pouyanmehr

Set key-value on JS Object!

About this post

Table of Contents

JavaScript Limitations When Setting Key-Value Pairs on an Object

Utility: setKeyValueOnObject()

Javascript plain object!

About this post

Table of Contents

What is a plain object in JavaScript?

Utility: isPlainObject()

React hook to get device details!

About this post

Table of Contents

About code pool

When to use?

Device Details Hook

Minimal alternative to `clsx`!

About this post

Table of Contents

About code pool

Why to use?

CX Utility

Hoisting in JavaScript

About this post

Table of Contents

Definition of Hoisting in JavaScript

Type

Variable Hoisting

Hoisting of var

Hoisting of let

Hoisting of const

Function Hoisting

Function Declartion

Function Expression

Class Hoisting

Why does Hoisting exist in JS?

References

Conclusion

Split your translations in `next-intl` in a nice way!

What is this post about?

Table of Contents

Prerequisite

How the solution is going to work?

Implementation

Step One: Creating a Next.js app

Step Two: Adding next-intl and Config it

Step Three: Adding navigation

Step Four: Split translations

Conclusion

☕ Coffee Time Reads - Ideal Folder Structure for React Projects

What is this post about?

Why folder structure matters?

Keep these things in mind before your decisions

😵 Don't overthink about folder structure.

💡 Inspire from similar open source projects

🤸‍♀️🤸‍♂️ Be flexible to the changes

⚪ Think GENERIC

🏁 Start Your Project

React Markdown + JOY UI

Table of Contents

About This Post

Using Markdown in your project

Using Joy UI in your project

About "jui-markdown" package

Some of "jui-markdown" features

Package usage

Docs

Add image to draft-js editor (no plugin)

What is this post about?

Table of contents

Requirements

Draft JS and Contenido

Installation

Create Editor component

Add Placeholder

Steps Overview

Add Toolbar

Handle Adding Image

Create Image Component

Step Two: Adding `next-intl` and Config it