Upgrade component to work with React 19

Author: ChrisUser

.github/workflows/ci.yml

@@ -7,15 +7,15 @@ on:
     branches: [main]
 
 env:
-  NODE_VERSION: "18"
+  NODE_VERSION: "20"
 
 jobs:
   full-code-check:
     runs-on: ubuntu-latest
     steps:
       - name: Full-check repository
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v2.5.1
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           check-latest: true

.github/workflows/docs.yml

@@ -1,7 +1,9 @@
 name: Docs build and deploy
-on:
-  push
-  # paths: ["src/**"] # Trigger the action only when files change in the folders defined here
+on: push
+
+env:
+  NODE_VERSION: "20"
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
@@ -10,6 +12,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           persist-credentials: false
+      - name: Setup Node.js 📦
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          check-latest: true
       - name: Install and Build 🔧
         run: | # Install packages and build the demo project
           yarn install

lib/ContentEditable.tsx

@@ -268,7 +268,7 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
   return (
     <div
       className={containerClassName}
-      style={{ display: "flex", alignItems: "center" }}
+      style={{ display: "flex", alignItems: "center", position: "relative" }}
     >
       <div
         ref={divRef}
@@ -280,7 +280,7 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
         aria-label={placeholder ?? ""}
         className={contentEditableClassName}
         style={{
-          padding: "calc((1.5rem * 1.3125)/2) 0 calc((1.5rem * 1.3125)/2) 1rem",
+          padding: "0.85rem",
           overflow: "auto",
           height: "auto",
           textAlign: "initial",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-basic-contenteditable",
-  "description": "React 18 contenteditable component. Super-customizable!",
-  "version": "1.0.2",
+  "description": "React contenteditable component. Super-customizable!",
+  "version": "1.0.3",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -40,20 +40,21 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.0",
-    "vite-plugin-dts": "^3.7.2"
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "glob": "^11.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vite-plugin-dts": "^4.4.0"
   },
   "bugs": {
     "url": "https://github.com/ChrisUser/react-basic-contenteditable/issues"

vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "vite"
 import { extname, relative, resolve } from "path"
 import { fileURLToPath } from "node:url"
-import glob from "glob"
+import { glob } from "glob"
 import react from "@vitejs/plugin-react-swc"
 import dts from "vite-plugin-dts"