import BlogPostLayout from '@/components/BlogPostLayout';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="React tiptap custom extension for word count"
 description="Creating a custom extension for React Tiptap to count and limit the number of words"
 publishedAt="08/08/2024"
 keywords="reactjs, nextjs, tiptap, custom extension"
 imageUrl="/images/tiptap.webp"
>{children}</BlogPostLayout>;

If you are working with React and implementing a rich text editor, then chances are you are using [React Tiptap](https://tiptap.dev/).
Even though it is a very powerful and flexible editor, it can still be missing some features that you need.
In this blog post, I will show you how to create a custom extension for React Tiptap to count and limit the number of words.

## The problem

In one of my recent projects, a rich text editor implementation required us to be able to limit to a certain number of words.
Even though the common practice is to use a character counter, which is something that tiptap offers out of the box, we needed a way to count and limit the number of words in the editor.

## The solution

By looking at the tiptap documentation, I found that it offers a way to create custom extensions.
Whats even better is that you can view the source code of the extensions that are already available in the library.
Meaning that based on the CharacterCount extension, we can create our own WordCount extension.

Here is how the extension looks:

```typescript
import { Extension } from '@tiptap/core';
import { Node as ProseMirrorNode } from '@tiptap/pm/model';
import { Plugin, PluginKey } from '@tiptap/pm/state';

export interface WordCountOptions {
 /**
 * The maximum number of words that should be allowed. Defaults to `0`.
 * @default null
 * @example 180
 */
 limit: number | null | undefined;
}

export interface WordCountStorage {
 words: (options?: { node?: ProseMirrorNode }) => number;
}

export const WordCount = Extension.create<WordCountOptions, WordCountStorage>({
 name: 'wordCount',

 addOptions() {
 return {
 limit: null,
 };
 },

 addStorage() {
 return {
 words: () => 0,
 };
 },

 onBeforeCreate() {
 this.storage.words = (options) => {
 const node = options?.node || this.editor.state.doc;
 const text = node.textBetween(0, node.content.size, ' ', ' ');
 const words = text.split(' ').filter((word) => word !== '');

 return words.length;
 };
 },

 addProseMirrorPlugins() {
 return [
 new Plugin({
 key: new PluginKey('wordCount'),
 filterTransaction: (transaction, state) => {
 const limit = this.options.limit;
 if (
 !transaction.docChanged ||
 limit === 0 ||
 limit === null ||
 limit === undefined
 ) {
 return true;
 }

 const oldSize = this.storage.words({ node: state.doc });
 const newSize = this.storage.words({ node: transaction.doc });
 if (newSize <= limit) {
 return true;
 }
 if (oldSize > limit && newSize > limit && newSize <= oldSize) {
 return true;
 }
 if (oldSize > limit && newSize > limit && newSize > oldSize) {
 return false;
 }

 const isPaste = transaction.getMeta('paste');
 if (!isPaste) {
 return false;
 }

 const pos = transaction.selection.$head.pos;
 const over = newSize - limit;
 const from = pos - over;
 const to = pos;

 transaction.deleteRange(from, to);

 const updatedSize = this.storage.words({ node: transaction.doc });
 if (updatedSize > limit) {
 return false;
 }

 return true;
 },
 }),
 ];
 },
});
````

In order to use this extension, we need to add it to the configuration of our editor:

```typescript
const editor = useEditor({
 extensions: [
 WordCount.configure({
 limit: maxWords,
 }),
 ],
});
```

It can even be used in conjunction with the CharacterCount extension, so that you can count and limit the number of characters and words in the editor:

```typescript
const editor = useEditor({
 extensions: [
 CharacterCount.configure({
 limit: maxChars,
 }),
 WordCount.configure({
 limit: maxWords,
 }),
 ],
});
```

And voila! You now have a rich text editor with a word count extension that can be used to limit the number of words in
🎉

React tiptap custom extension for word count

import BlogPostLayout from '@/components/BlogPostLayout';
import globalStyles from '@/styles/Main.module.css';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Free Custom Email for Your Domain: How to Set Up Email Forwarding with Google without Google Workspace"
 description="How to set up a free custom email for your domain. How to set up email forwarding and alias with Google without Google Workspace"
 publishedAt="02/17/2023"
 keywords="domain, google domains, gmail"
 imageUrl="/images/4.webp"
>{children}</BlogPostLayout>;

Are you considering using a custom email address with your newly purchased domain but hesitant to invest in Google Workspace?
Well, here's some good news! You can take advantage of Google's email forwarding feature for free, without the need for a paid Google Workspace subscription.

This can be a great solution for individuals and small businesses who don't have a large team to manage their email communications.
In this blog post, I will walk you through how to set up email forwarding and alias with Google to send and receive emails as your custom domain email.

## Email forwarding setup

Suppose you have recently purchased a domain name, dawid.app, and now you want to be able to send and receive emails using the email address hello@dawid.app.
To set this up, you will need to create another free email account on Gmail, which will be used for forwarding emails from your custom to your personal email address.
This additional email account can be one that you've used before or you can create a new one using Gmail.

We will begin by setting up email forwarding from your custom domain email to your personal @gmail.com email.
In this example the personal email will be dawid.a@mail.com.

**Step 1**: Begin by logging into your domains.google account at [https://domains.google.com/](https://domains.google.com/).

**Step 2**: Click manage on the domain you want to set up your custom email for:

<img src="/blog/google-domain/1.png" alt="Manage button in my domains section on google domains" />

**Step 3**: After navigating to your domain, navigate to the email section on the left sidebar

<img src="/blog/google-domain/2.png" alt="Sidebar with email button on google domains" />

**Step 4**: In the email panel, on the right, scroll down to the Email forwarding section and click on Add email alias

<img src="/blog/google-domain/3.png" alt="Email forwarding section on google domains" />

**Step 5**: In the left field input the alias you want to use for your custom domain email. In this example it will be hello as we are going for hello@dawid.app.
In the right field input your personal existing gmail email. The one to which the emails will be forwarded to.

<img src="/blog/google-domain/4.png" alt="Email forwarding section on google domains" />

**Step 6**: If the personal email you input in the previous step owns the domain you should be able to skip this step.
Else you will receive a confirmation email on the personal email, to confirm it is you are trying to set up the forwarding.
Therefore, log in to your personal email and verify it is you setting it up.

Aaand for the forwarding we are done! 🎉

The email forwarding should now work. Whenever someone sends email to hello@dawid.app you will receive those emails on your personal gmail account.
You won’t be able to send emails from the custom domain email just yet, this is what we will solve in the next section.

## Sending emails from your custom domain email

We can receive emails sent to our custom hello@dawid.app email, but we want to also be able to send emails from it to our customers.
Let’s work on that.

**Step 1**: Log into your personal gmail account to which you forwarded emails to in the previous section.
When logged in, in the top right corner of your screen, click on your avatar and navigate to Manage your Google account.

<img src="/blog/google-domain/5.png" alt="Click on Google Account button on gmail" />

**Step 2**: On the left sidebar navigation click Security

<img src="/blog/google-domain/6.png" alt="Security button on gmail" />

**Step 3**: Under the section called Signing in to Google you should see 2-Step verification.
**If you don’t have 2-Step verification set up, you will have to do that first**.
After that you will be able to set up the App passwords which is what we want, so click on that.

<img src="/blog/google-domain/7.png" alt="Signing in to google section on gmail, click on app passwords" />

**Step 4**: After clicking on App passwords Google will probably ask you to log in again for security purposes, so let’s log back in.

**Step 5**: Click on Select app and select the Other (Custom name) option

<img src="/blog/google-domain/8.png" alt="Setting up app password on gmail, select Other (custom name)" />

**Step 6**: In the input that appeared make sure to enter Gmail and then press GENERATE

<img src="/blog/google-domain/9.png" alt="Input Gmail into the box that appeared for app passwords" />

**Step 7**: You will now see a dialog with an App password for your device. **Copy this password**.

<img src="/blog/google-domain/10.png" alt="Cope the app password for your device" />

**Step 8**: After copying the password, navigate to your personal gmail account. In the top right corner of the screen click on the cog wheel and on See all settings

<img src="/blog/google-domain/11.png" alt="Clicking the cogwheel and navigating to see all settings in gmail" />

**Step 9**: In the Settings navigate to the Accounts and Import tab

<img src="/blog/google-domain/12.png" alt="Click on the accounts and import tab in the settings" />

**Step 10**: Under the Send mail as section click on Add another email address

<img src="/blog/google-domain/13.png" alt="Add another email address under send mail as section on gmail" />

**Step 11**: Google will open a new window for you where you will now be able to set up an alias for the custom email.
In the Email address field type in the custom email address you are setting it up for.
For the example we are setting it up for hello@dawid.app

<img src="/blog/google-domain/14.png" alt="Inputting custom email address into the email address field" />

**Step 12**: On the next step set the SMTP Server to be smtp.gmail.com.
For the Username enter your personal email, not the custom email here.
**For the password paste in the password you copied in Step 7**. Then press Add Account

<img src="/blog/google-domain/15.png" alt="Inputting the SMTP details for personal email" />

**Step 13**: You will now see a confirm verification screen, meaning that all that's left is to confirm on the personal email.
Navigate to your email and confirm it. (It will say the email was sent to is your new custom email,
but if you followed the first section of this tutorial then you will simply receive that email on your personal email you set it up for)

<img src="/blog/google-domain/16.png" alt="Confirm verification on your email dialog" />

You can now receive as well as **send** emails from your new custom domain email! 🎉

When sending emails, when you want to send an email as the new custom email, simply click on the From field and select the custom email you want it to be sent from.

<img src="/blog/google-domain/17.png" alt="Selecting which email to send the email from on gmail" />

## What if you point your domain to your websites host name servers?

You may have changed the name servers of your domain to point it to your website's hosting provider in order to get your website up and running.
However, this action can result in an unexpected problem - your email forwarding breaks.
This means that while you can still send emails from your custom email address, you may not be able to receive any incoming emails.
This can be a frustrating issue, but don't worry - we will fix it by doing the following.

Simply add MX records in your website’s hosting provider to Google.

The values have to be as following:

<table>
 <thead>
 <tr>
 <th className={globalStyles.hideMobileTable}>Name</th>
 <th className={globalStyles.hideMobileTable}>Type</th>
 <th className={globalStyles.hideMobileTable}>TTL</th>
 <th>Priority</th>
 <th>Value</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>5</td>
 <td>gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>10</td>
 <td>alt1.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>20</td>
 <td>alt2.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>30</td>
 <td>alt3.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>40</td>
 <td>alt4.gmr-smtp-in.l.google.com</td>
 </tr>
 </tbody>
</table>

## Final thoughts

Congratulations! With domain email forwarding now set up, you can enjoy the benefits of a professional-looking custom email address for your domain,
allowing you to send and receive emails seamlessly. This easy-to-implement solution is especially ideal for individuals and small businesses looking
to establish a professional online presence without incurring additional costs.
I hope this guide has been helpful in providing you with the necessary steps to set up email forwarding for your domain.

 
Happy emailing and thanks for reading! ❤️

Also be sure to check out my [youtube channel](https://youtube.com/@webdevbydawid) if you haven't yet

Free Custom Email for Your Domain - How to Set Up Email Forwarding with Google without Google Workspace

import BlogPostLayout from '@/components/BlogPostLayout';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Simple setup for dark and light theme toggle in NextJS"
 description="Set up a dark and light theme with a toggle in NextJS using next-themes and NextJS CSS Modules or TailwindCSS."
 publishedAt="02/15/2023"
 keywords="reactjs, nextjs, tailwindcss, next-themes"
 imageUrl="/images/3.webp"
>{children}</BlogPostLayout>;

Are you looking to implement a dark and light theme on your NextJS website with a toggle switch?
I will show you a super simple implementation, that will take you about 5 minutes to implement.

## What will we be using?

As for this project we will be using a package named next-themes and the default [NextJS CSS Modules](https://beta.nextjs.org/docs/styling/css-modules), but great news!
The library we will be using next-themes works well with [Tailwind CSS](https://tailwindcss.com/) as well, if that is what you’re looking for.
It will provide us with an easy solution to manage your website’s theme.

## Getting started

First we will need to install the necessary dependencies, for this we are assuming you already have Tailwind CSS installed if that is the route you are going.
So let's install the main library we need which is next-themes by running the command:

```shell
npm i next-themes
```

## Setting up next-themes

Inside your _app.js or _app.tsx (depending on if you are using TypeScript in your project) we will wrap the Component with a ThemeProvider from next-themes.

If you are using Tailwind CSS then you will also have to pass attribute="class" to the ThemeProvider else it is not necessary.

This is what our _app.tsx file should look like after the change:

```typescript
import type { AppProps } from 'next/app'
import { ThemeProvider } from "next-themes";

export default function App({ Component, pageProps }: AppProps) {
 return (
 <ThemeProvider>
 <Component {...pageProps} />
 </ThemeProvider>
 );
}
```

## If using Tailwind CSS

If you are using Tailwind CSS then this is an extra step where you have to add a property to your config file tailwindcss.config.js.
We need to tell Tailwind that we’re going to be changing the theme manually instead of purely relying on the users system preference.
In order to do that we need to add the darkMore: "class" property to the config as such:

```typescript
module.exports = {
 darkMode: "class",
 purge: [
 "./components/**/*.{js,ts,jsx,tsx}",
 "./pages/**/*.{js,ts,jsx,tsx}"
 ],
 theme: {},
 variants: {},
 plugins:[]
};
```

## Default styles on globals.css

If you are using Tailwind CSS then you can skip this step, because then you are basically ready to use dark: on classes to use [Dark Mode](https://tailwindcss.com/docs/dark-mode).

If you are not using Tailwind CSS let’s set up some default styles in our globals.css file.
Here we can set our default variables and what they should be in case the theme is set to “dark”:

```css
:root {
 --background: #FFFFFF;
 --foreground: #000000;
}

[data-theme='dark'] {
 --background: #161B26;
 --foreground: white;
}
```

## Theme based on system preference

We can also use the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media feature to detect if a user has a dark colour theme set on their operating system and set the websites default theme to be dark:

```css
@media (prefers-color-scheme: dark) {
 html {
 color-scheme: dark;
 }
}
```

## Creating a theme toggle button

We have everything set up. Now we can simply use next-themes useTheme() hook to find out the current theme on our website as well as to set another theme as active.

Here is an example theme toggle component using next-themes to toggle the theme between light and dark:

```typescript
import {useTheme} from "next-themes";
import {useEffect, useState} from "react";

const ThemeToggle = () => {
 const { theme, setTheme } = useTheme();
 const [mounted, setMounted] = useState(false);

 useEffect(() => {
 setMounted(true);
 }, []);

 if (!mounted) return null;

 return (
 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 Toggle theme
 </button>
 );
}

export default ThemeToggle;
```

Then you can simply use this component inside your navigation, header or wherever you prefer to have a theme toggle button.

We are done, congratulations you have your light and dark themes implemented!

🎉

Simple setup for dark and light theme toggle in NextJS

import BlogPostLayout from '@/components/BlogPostLayout';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Convert Create React App (CRA) to Vite in 5 minutes"
 description="Convert Create React App (CRA) to Vite in 5 minutes"
 publishedAt="02/13/2023"
 keywords="reactjs, cra, vite"
 imageUrl="/images/2.webp"
>{children}</BlogPostLayout>;

I managed to migrate a Create React App (CRA) to Vite in under 5 minutes and the results are amazing! The start up times, the npm installs, the builds…

This conversion was done on a small react project you can find on [my github](https://github.com/DawidAbram/react-simple-portfolio).
Also if you are interested, [here](https://youtu.be/yoLWXnLUjOw) is a video of me actually doing the conversion.

## What is Vite?

[Vite](https://vitejs.dev/) (pronounced veet) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
It has been created by Evan You, the creator of Vue. It allows for a faster development thanks to its features such as fast [Hot Module Replacement](https://vitejs.dev/guide/features.html#hot-module-replacement) (HMR), [TypeScript support](https://vitejs.dev/guide/features.html#typescript) out of the box, as well as super fast cold starts.

Vite leverages the power of [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), [esbuild](https://esbuild.github.io/) and [Rollup](https://rollupjs.org/) to improve development and build time.
Unlike CRA, Vite does not build the entire application before serving, instead it builds the application on demand.

<img src="/images/i-am-speed.gif" alt="I am speed animation" />

## Why switch to Vite?

Create React App (CRA) has been the go-to tool for most developers to quickly scaffold a react project for a long time.
It has allowed many developers, including myself, to quickly setup and maintain a lot of projects.
However, here are some reasons why I decided and would probably recommend you to also switch:

- **Speed** - As the size of the app increases, you can really begin to feel the difference in speed even in just the cold starts. Unlike CRA or bundler-based build setup, Vite does not build the entire application before serving. It divides the application modules into two categories of dependencies and source code. CRA uses webpack under the hood, which bundles the entire application code before it can be served. With a large codebase, it takes more time to spin up the development server and reflect the changes made, where as with Vite that is not the case.

- **Reloads** - Less time spent waiting for reload of changes reflecting file updates. In Vite, Hot Module Replacement (HMR) is performed over native ES Modules. When a file is edited, Vite invalidates the chain between the edited module and its closest HMR boundary. This makes HMR updates simple and fast regardless of the size of your application.

- **Build** - Faster build times. Vite ships with a pre-configured build command that includes many performance optimizations out of the box, such as async chunk loading and CSS code splitting.

- **TypeScript** - Vite provides support of typescript out of the box. It uses esbuild to transpile TypeScript into JavaScript which is about 20-30x faster than vanilla tsc.

You can find more information about why [right here](https://vitejs.dev/guide/why.html)

## How to migrate

Here are the steps I took to migrate my Create React App to Vite in literally 5 minutes.
Worth noting that if you have a large production application, it might take a tiny bit longer since you will probably have to add some custom settings, but I think it's still possible! 💪

### Install dependencies

We’ll start off by installing 4 dependencies that include Vite, @vitejs/plugin-react, vite-tsconfig-paths and vite-plugin-svgr.

In order to do that, let’s run an npm install command:

```shell
npm i --save-dev vite @vitejs/plugin-react, vite-tsconfig-paths vite-plugin-svgr
```

### Create Vite config file

In the root directory of your project (not in /src or /app, in the root folder) create a vite.config.ts file. This is the file where you specify all of Vite configuration options, such as plugins, port to run development server on, opening app on server start etc.

Inside the file paste the following:

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
 react(),
 viteTsconfigPaths(),
 svgrPlugin()
 ],
 server: {
 port: 4000,
 open: true
 }
});
```

### Create Vite env file

Create a vite-env.d.ts file inside of the /src folder and inside the file paste the following:

```typescript
// <reference types="vite/client" />
```

### Update tsconfig.json

Update the tsconfig.json file (located in your root directory).
The fields that we need to update are target, lib and types. Target and lib should already have a value so replace them, types might have to be added.

Here is an example tsconfig.json file:

```typescript
{
 "compilerOptions": {
 "target": "ESNext",
 "lib": [
 "dom",
 "dom.iterable",
 "esnext"
 ],
 "types": [
 "vite/client",
 "vite-plugin-svgr/client"
 ],
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "noFallthroughCasesInSwitch": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "noEmit": true,
 "jsx": "react-jsx"
 },
 "include": [
 "src"
 ]
}
```

### index.html file adjustments

We will need to do a couple of index.html adjustments in order for Vite to work.

1. Move the index.html file out from the /public folder into the root folder of your project.
2. Inside index.html remove all references of %PUBLIC_URL%. For example instead of %PUBLIC_URL%/logo192.png leave it as /logo192.png.
3. Add the below script below the div element with id root inside the body as such:

```typescript
<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <script type="module" src="/src/index.tsx"></script>
</body>
```

### Remove react-scripts

We will no longer need react-scripts, we are ready to remove it. Run the command to uninstall it:

```shell
npm uninstall react-script
```

You can also delete react-app-env.d.ts file if you have it.

### Update package.json

We are now ready to update the package.json to use the newly added vite instead of react-scripts.

In order to do this replace the scripts inside of package.json with the following:

```typescript
"scripts": {
 "start": "vite",
 "build": "tsc && vite build",
 "serve": "vite preview"
},
```

### Update environmental variables testing super long

If you have any environmental variables in the .env files, you will also have to update them to begin with VITE_ instead of REACT_APP_

### Run your app

You are now ready to start up your app, powered by Vite. 
Run the npm start command and be amazed by the speed!

🎉

## Build folder

Also, worth noting that in Vite the default production build folder is dist. You can change this inside of vite.config.ts file, for example by setting it to the CRA’s default build folder, as such:

```typescript
export default defineConfig({
 ...
 build: {
 outDir: 'build',
 },
});
```

## Final thoughts

I think considering how fast and simple the conversion was, with the results it provided, I couldn’t be happier.
I am not sure why anyone wouldn’t do this, what do you think?

Be sure to check out [my youtube](https://www.youtube.com/@webdevbydawid) channel where you can find me doing this conversion as well as many more coding related videos.


 
Thanks for reading! ❤️

I help startups build software that scales.

Fractional CTO

Technical advisory

Hands-on development

TH-EY

prettyestimate

Open source

Writing

React tiptap custom extension for word count

Free Custom Email for Your Domain - How to Set Up Email Forwarding with Google without Google Workspace

Simple setup for dark and light theme toggle in NextJS

Convert Create React App (CRA) to Vite in 5 minutes

Have a project in mind?