upgrade to react 19 and tiptap editor

biome.json

@@ -27,6 +27,9 @@
       },
       "performance": {
         "noDelete": "off"
+      },
+      "style": {
+        "useBlockStatements": "error"
       }
     }
   },

package.json

@@ -48,47 +48,55 @@
     "bump": "bump-package-versions --part=patch --strategy=highest ./package.json"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.14.0",
     "@floating-ui/react": "0.27.18",
     "@flowplayer/player": "3.32.1",
-    "@popperjs/core": "2.11.6",
     "@viaa/avo2-types": "5.0.16",
     "autosize": "6.0.1",
-    "braft-editor": "^2.3.9",
-    "braft-extensions": "0.1.1",
     "clsx": "2.0.0",
     "date-fns": "3.6.0",
-    "draft-js": "0.10.5",
     "js-beautify": "1.15.4",
-    "react": "18.3.1",
+    "react": "19.2.5",
     "react-colorful": "5.6.1",
-    "react-dom": "18.3.1",
-    "react-modal": "3.14.4",
+    "react-dom": "19.2.5",
+    "react-modal": "3.16.3",
     "react-perfect-scrollbar": "1.5.8",
-    "react-popper": "2.3.0",
-    "react-range": "1.8.14",
+    "react-range": "1.10.0",
     "react-select": "5.10.2",
-    "react-table": "7.7.0"
+    "@tanstack/react-table": "8.21.3"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.4",
     "@commitlint/cli": "17.7.1",
     "@commitlint/config-conventional": "17.7.0",
-    "@storybook/react-vite": "10.4.1",
     "@storybook/react": "10.4.1",
+    "@storybook/react-vite": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.0",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
+    "@tiptap/extension-image": "3.27.1",
+    "@tiptap/extension-link": "3.27.1",
+    "@tiptap/extension-placeholder": "3.27.1",
+    "@tiptap/extension-subscript": "3.27.1",
+    "@tiptap/extension-superscript": "3.27.1",
+    "@tiptap/extension-table": "3.27.1",
+    "@tiptap/extension-table-cell": "3.27.1",
+    "@tiptap/extension-table-header": "3.27.1",
+    "@tiptap/extension-table-row": "3.27.1",
+    "@tiptap/extension-text-align": "3.27.1",
+    "@tiptap/extension-text-style": "3.27.1",
+    "@tiptap/extension-underline": "3.27.1",
+    "@tiptap/pm": "3.27.1",
+    "@tiptap/react": "3.27.1",
+    "@tiptap/starter-kit": "3.27.1",
     "@types/autosize": "4.0.1",
     "@types/jest": "29.5.5",
     "@types/js-beautify": "1.14.3",
     "@types/node": "22.15.29",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
-    "@types/react-modal": "3.13.1",
-    "@types/react-table": "7.7.9",
-    "@vitejs/plugin-react": "5.1.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@types/react-modal": "3.16.3",
+    "@vitejs/plugin-react": "6.0.1",
     "autoprefixer": "10.4.15",
     "bump-package-versions": "^1.0.7",
     "cross-env": "7.0.3",
@@ -101,30 +109,39 @@
     "lint-staged": "^13.0.3",
     "lorem-ipsum": "2.0.4",
     "postcss": "8.5.6",
-    "react-select-event": "5.3.0",
+    "react-select-event": "5.5.1",
     "rimraf": "3.0.2",
     "sass": "1.93.3",
-    "snyk": "^1.1300.2",
     "storybook": "10.4.1",
     "stylelint": "16.25.0",
     "stylelint-config-standard-scss": "16.0.0",
     "ts-jest": "29.1.1",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "vite": "7.2.2",
+    "vite": "8.0.5",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-svgr": "4.5.0"
+    "vite-plugin-svgr": "4.5.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "@emotion/react": "11.14.0",
+    "@floating-ui/react": "0.27.18",
+    "@flowplayer/player": "3.32.1",
+    "@viaa/avo2-types": "5.0.13",
+    "autosize": "6.0.1",
+    "clsx": "2.0.0",
+    "date-fns": "3.6.0",
+    "js-beautify": "1.15.4",
+    "react-colorful": "5.6.1",
+    "react-modal": "3.16.3",
+    "react-perfect-scrollbar": "1.5.8",
+    "react-range": "1.10.0",
+    "react-select": "5.10.2",
+    "@tanstack/react-table": "8.21.3"
   },
   "publishConfig": {
     "@viaa:registry": "http://do-prd-mvn-01.do.viaa.be:8081/repository/npm-viaa/"
   },
   "snyk": true,
-  "overrides": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -136,5 +153,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "resolutions": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   }
 }

src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { type FC, forwardRef, type MouseEvent, type ReactNode } from 'react';
+import { type FC, forwardRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';
 
 import { bemCls, getVariantClasses } from '../../utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
@@ -51,7 +51,7 @@ const Button: FC<ButtonProps> = forwardRef<HTMLButtonElement, ButtonProps>(
 			</span>
 		);
 
-		const wrapInTooltip = (element: JSX.Element): JSX.Element => {
+		const wrapInTooltip = (element: ReactElement): ReactElement => {
 			return (
 				<Tooltip position={tooltipPosition || 'top'}>
 					<TooltipTrigger>{element}</TooltipTrigger>

src/components/CheckboxList/CheckboxList.stories.tsx

@@ -3,6 +3,7 @@ import { cloneElement, type FC, type ReactElement, type ReactNode, useState } fr
 import { action } from 'storybook/actions';
 
 import CheckboxList from './CheckboxList';
+import type { CheckboxListProps } from './CheckboxList.types';
 
 const DEFAULT_ITEMS: { label: string; value: unknown; checked?: boolean }[] = [
 	{ label: 'item A', value: 'itemA' },
@@ -14,7 +15,7 @@ const CheckboxListStoryComponent: FC<{ children?: ReactNode }> = ({ children })
 	const [items, setItems] =
 		useState<{ label: string; value: unknown; checked?: boolean }[]>(DEFAULT_ITEMS);
 
-	const onItemClick = (checked: boolean, value: string) => {
+	const onItemClick = (checked: boolean, value: unknown) => {
 		action(`onChange: checked: ${checked}, value: ${value}`)();
 		setItems((oldItems) => {
 			const newItems = [...oldItems];
@@ -26,7 +27,7 @@ const CheckboxListStoryComponent: FC<{ children?: ReactNode }> = ({ children })
 		});
 	};
 
-	return cloneElement(children as ReactElement, {
+	return cloneElement(children as ReactElement<CheckboxListProps<unknown>>, {
 		items,
 		onItemClick,
 	});

src/components/ContentInput/ContentInput.tsx

@@ -2,8 +2,10 @@ import clsx from 'clsx';
 import {
 	type FC,
 	forwardRef,
+	isValidElement,
 	type KeyboardEvent,
 	type MouseEvent,
+	type ReactElement,
 	type ReactNode,
 	useCallback,
 	useState,
@@ -105,8 +107,16 @@ const ContentInput: FC<ContentInputProps> = forwardRef<HTMLInputElement, Content
 		 */
 
 		const isSingleElement = (node: ReactNode) => {
-			const el = node as JSX.Element;
-			return !(el?.props?.children && el.props.children.length > 1);
+			if (!isValidElement(node)) {
+				return true;
+			}
+
+			const el = node as ReactElement<{ children?: ReactNode }>;
+			return !(
+				el?.props?.children &&
+				Array.isArray(el.props.children) &&
+				el.props.children.length > 1
+			);
 		};
 
 		const makeInteractionObject = (func: (e: MouseEvent | KeyboardEvent) => void) => {
@@ -204,7 +214,11 @@ const ContentInput: FC<ContentInputProps> = forwardRef<HTMLInputElement, Content
 					}}
 					ref={(element) => {
 						setInstance(element);
-						return ref;
+						if (typeof ref === 'function') {
+							ref(element);
+						} else if (ref) {
+							ref.current = element;
+						}
 					}}
 					type={type}
 					value={value}

src/components/Dropdown/Dropdown.stories.tsx

@@ -6,8 +6,9 @@ import { MenuContent } from '../Menu/MenuContent';
 import { menuItems, menuItemsWithIcons } from './__mocks__/dropdown';
 import Dropdown from './Dropdown';
 import { DropdownButton, DropdownContent } from './Dropdown.slots';
+import type { DropdownProps } from './Dropdown.types';
 
-const DropdownStoryComponent = ({ children }: { children: ReactElement }) => {
+const DropdownStoryComponent = ({ children }: { children: ReactElement<DropdownProps> }) => {
 	const [isOpen, setOpen] = useState(false);
 
 	const open = () => {

src/components/Dropdown/Dropdown.tsx

@@ -19,7 +19,7 @@ import { Menu } from '../Menu';
 
 /**
  * This component provides a button that can show a flyout with some children inside it.
- * The PopperJS library is used to provide the positioning logic for the flyout element.
+ * The @floating-ui/react library is used to provide the positioning logic for the flyout element.
  *
  * The nomenclature within this library is as follows:
  * - The button with down-arrow is called the "reference"

src/components/FlowPlayer/FlowPlayer.stories.tsx

@@ -7,9 +7,14 @@ import { Modal } from '../Modal';
 import { FlowPlayer } from './FlowPlayer';
 import { setPlayingVideoSeekTime } from './FlowPlayer.helpers';
 import { MOCK_FLOW_PLAYER_PROPS_FULL, MOCK_PLAYLIST_SOURCE } from './FlowPlayer.mock';
+import type { FlowPlayerProps } from './FlowPlayer.types';
 import peakJson from './Peak/__mock__/peak.json' with { type: 'json' };
 
-const FlowPlayerStoryComponentSetTimeButtons = ({ children }: { children: ReactElement }) => (
+const FlowPlayerStoryComponentSetTimeButtons = ({
+	children,
+}: {
+	children: ReactElement<FlowPlayerProps>;
+}) => (
 	<>
 		{cloneElement(children)}
 		<br />
@@ -23,7 +28,11 @@ const FlowPlayerStoryComponentSetTimeButtons = ({ children }: { children: ReactE
 	</>
 );
 
-const FlowPlayerStoryComponentOpenInModal = ({ children }: { children: ReactElement }) => {
+const FlowPlayerStoryComponentOpenInModal = ({
+	children,
+}: {
+	children: ReactElement<FlowPlayerProps>;
+}) => {
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	return (
 		<>
@@ -35,7 +44,11 @@ const FlowPlayerStoryComponentOpenInModal = ({ children }: { children: ReactElem
 	);
 };
 
-const FlowPlayerStoryComponentExternalControls = ({ children }: { children: ReactElement }) => {
+const FlowPlayerStoryComponentExternalControls = ({
+	children,
+}: {
+	children: ReactElement<FlowPlayerProps>;
+}) => {
 	const [fullscreen, setFullscreen] = useState(false);
 	const [pause, setPause] = useState(true);
 	return (
@@ -45,7 +58,6 @@ const FlowPlayerStoryComponentExternalControls = ({ children }: { children: Reac
 				fullscreen,
 				onPlay: () => setPause(false),
 				onPause: () => setPause(true),
-				onToggleFullscreen: (val: boolean) => setFullscreen(val),
 			})}
 			<br />
 			<Button label="play/pause" onClick={() => setPause(!pause)} />
@@ -61,29 +73,29 @@ const meta: Meta<typeof FlowPlayer> = {
 export default meta;
 type Story = StoryObj<typeof FlowPlayer>;
 
-const Template = (args: any) => (
+const Template = (args: FlowPlayerProps) => (
 	<div style={{ width: '50%' }}>
 		<FlowPlayer {...args} />
 	</div>
 );
 
-const TemplateSetTimeButtons = (args: any) => (
+const TemplateSetTimeButtons = (args: FlowPlayerProps) => (
 	<div style={{ width: '50%' }}>
 		<FlowPlayerStoryComponentSetTimeButtons>
 			<FlowPlayer {...args} />
 		</FlowPlayerStoryComponentSetTimeButtons>
 	</div>
 );
 
-const TemplatePlaylistInModal = (args: any) => (
+const TemplatePlaylistInModal = (args: FlowPlayerProps) => (
 	<div style={{ width: '50%' }}>
 		<FlowPlayerStoryComponentOpenInModal>
 			<FlowPlayer {...args} />
 		</FlowPlayerStoryComponentOpenInModal>
 	</div>
 );
 
-const TemplateExternalControls = (args: any) => (
+const TemplateExternalControls = (args: FlowPlayerProps) => (
 	<div style={{ width: '50%' }}>
 		<FlowPlayerStoryComponentExternalControls>
 			<FlowPlayer {...args} />

src/components/MoreOptionsDropdown/MoreOptionsDropdown.stories.tsx

@@ -3,11 +3,12 @@ import { cloneElement, type ReactElement, useState } from 'react';
 
 import { menuItems } from '../Menu/__mocks__/menu';
 import { MoreOptionsDropdown } from './MoreOptionsDropdown';
+import type { MoreOptionsDropdownPropsSchema } from './MoreOptionsDropdown.types';
 
 const MoreOptionsDropdownStory = ({
 	children,
 }: {
-	children: ReactElement;
+	children: ReactElement<MoreOptionsDropdownPropsSchema>;
 	defaultValue?: string;
 }) => {
 	const [isOpen, setIsOpen] = useState(false);

src/components/MultiRange/MultiRange.scss

@@ -0,0 +1,7 @@
+.c-input-range {
+	button {
+		border: 0;
+		width: 20px;
+		height: 20px;
+	}
+}

src/components/MultiRange/MultiRange.stories.tsx

@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { type ReactElement, cloneElement, useState } from 'react';
+import { cloneElement, type ReactElement, useState } from 'react';
 import { action } from 'storybook/actions';
 
-import MultiRange from './MultiRange';
+import MultiRange, { type MultiRangePropsSchema } from './MultiRange';
 import './MultiRange.stories.scss';
 
-const MultiRangeStoryComponent = ({ children }: { children: ReactElement }) => {
+const MultiRangeStoryComponent = ({
+	children,
+}: {
+	children: ReactElement<MultiRangePropsSchema>;
+}) => {
 	const [values, setValues] = useState<number[] | undefined>(undefined);
 
 	return cloneElement(children, {

src/components/MultiRange/MultiRange.tsx

@@ -7,6 +7,8 @@ import { bemCls } from '../../utils';
 import { noop } from '../../utils/noop';
 import { TextInput } from '../TextInput';
 
+import './MultiRange.scss';
+
 export interface MultiRangePropsSchema extends DefaultComponentProps {
 	id?: string;
 	disabled?: boolean;
@@ -125,7 +127,7 @@ const MultiRange: FC<MultiRangePropsSchema> = ({
 					const sliderId = index === 0 ? startSliderId : endSliderId;
 
 					return (
-						<div
+						<button
 							{...props}
 							key={props.key}
 							id={sliderId}