React 19 support

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mohamed Abid Miah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

jest.setup.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@troop.com/tiptap-react-render",
-  "version": "0.0.2",
+  "name": "@abidmiah128/tiptap-react-render",
+  "version": "0.0.4",
   "description": "Render TipTap JSON in React without the editor!",
   "scripts": {
     "rollup": "rollup -c",
@@ -9,26 +9,26 @@
   "author": "troop.com",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.5.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^17.0.53",
-    "babel-jest": "^29.5.0",
-    "jest": "^29.5.0",
-    "jest-dom": "^4.0.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "react": "^17.0.2",
-    "rollup": "^2.79.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "react": "^19.1.0",
+    "rollup": "^2.79.2",
     "rollup-plugin-dts": "^4.2.3",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.5.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
     "typescript": "^4.9.5"
   },
   "main": "dist/cjs/index.js",
@@ -39,6 +39,10 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/troop-dev/tiptap-react-render"
+    "url": "https://github.com/MohamedAbidMiah/tiptap-react-render"
+  },
+  "dependencies": {
+    "jest-environment-jsdom": "^29.7.0",
+    "react-dom": "^19.1.0"
   }
 }

readme.md

@@ -1,71 +1,71 @@
 # TipTap React Render
 
-[![npm](https://img.shields.io/npm/v/@troop.com/tiptap-react-render.svg?style=flat)](https://www.npmjs.com/package/@troop.com/tiptap-react-render)
-[![npm](https://img.shields.io/npm/dt/@troop.com/tiptap-react-render)](https://www.npmjs.com/package/@troop.com/tiptap-react-render)
+[![npm](https://img.shields.io/npm/v/@abidmiah128/tiptap-react-render.svg?style=flat)](https://www.npmjs.com/package/@abidmiah128/tiptap-react-render)
+[![npm](https://img.shields.io/npm/dt/@abidmiah128/tiptap-react-render)](https://www.npmjs.com/package/@abidmiah128/tiptap-react-render)
+
+This is a fork from the original libary [@troop.com/tiptap-react-render](https://www.npmjs.com/package/@troop.com/tiptap-react-render). Dependency and build updated to support next 15 and react 19.
 
 This library renders [TipTap](https://tiptap.dev/) JSON payloads in React clients without embedding the editor.
 
 ### Installation
+
 ```sh
 # npm
-npm install @troop.com/tiptap-react-render
+npm install @abidmiah128/tiptap-react-render
 
 # yarn
-yarn add @troop.com/tiptap-react-render
+yarn add @abidmiah128/tiptap-react-render
 ```
 
 ### Usage
+
 ```typescript
 // handle the document
-const doc: NodeHandler = (props) => (<>{props.children}</>)
+const doc: NodeHandler = (props) => <>{props.children}</>;
 
 // handle a paragraph
 const paragraph: NodeHandler = (props) => {
-  return <p>{props.children}</p>
-}
+  return <p style={props.node.attrs}>{props.children}</p>;
+};
 
 // handle text
 const text: NodeHandler = (props) => {
-  // you could process text marks here from props.node.marks ...
-  return <span>{props.node.text}</span>
-}
+  const { node } = props;
+  let content = <span>{node.text}</span>;
 
+  return content;
+};
 // handle an image
 const img: NodeHandler = (props) => {
   const { src, alt, title } = props.node;
-  return (<img src={src} alt={alt} title={title} />)
-}
+  return <img src={src} alt={alt} title={title} />;
+};
 
 // create a handlers wrapper
 const handlers: NodeHandlers = {
-  "doc": doc,
-  "text": text,
-  "paragraph": paragraph,
-  "img": img,
-}
+  doc: doc,
+  text: text,
+  paragraph: paragraph,
+  img: img,
+};
 
 // sample tip tap data
 const data = {
-  type: "doc",
+  type: 'doc',
   content: [
     {
-      type: "paragraph",
-      content: [{
-        type: "text",
-        text: "hello world"
-      }],
-      type: "paragraph",
-      content: [{
-        type: "img",
-        src: "https://some-url.com/img.jpg",
-        alt: "some alt text"
-      }]
-    }
-  ]
-}
-
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.',
+        },
+      ],
+    },
+  ],
+};
 // render it!
-const rendered = <TipTapRender handlers={handlers} node={data} />
+const rendered = <TipTapRender handlers={handlers} node={data} />;
 ```
 
 ### Why?