Merge pull request #1151 from equinor/fix/rte-onimageupload

fix/rte-onimageupload

Author: mariush2

Dockerfile

@@ -1,5 +1,5 @@
 # Base
-FROM imbios/bun-node:22-alpine AS base
+FROM oven/bun:1.2-alpine AS base
 WORKDIR /app
 COPY package.json ./
 COPY bun.lock ./

bun.lock

@@ -58,9 +58,9 @@
     "@faker-js/faker": "^9.6.0",
     "@storybook/addon-coverage": "^2.0.0",
     "@storybook/addon-designs": "^10.0.2",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@tanstack/react-query": "^5.67.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -96,7 +96,7 @@
     "react-dom": "^19.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "resolve-tspaths": "^0.8.23",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.10",
     "tsdown": "^0.14.2",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",

package.json

@@ -7,8 +7,8 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.1'
-const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const PACKAGE_VERSION = '2.11.3'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -71,11 +71,6 @@ addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
@@ -94,6 +89,8 @@ addEventListener('message', async function (event) {
 })
 
 addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return
@@ -110,23 +107,29 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event, requestId, requestInterceptedAt) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(event, client, requestId)
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -204,7 +207,7 @@ async function resolveMainClient(event) {
  * @param {string} requestId
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId) {
+async function getResponse(event, client, requestId, requestInterceptedAt) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
@@ -255,6 +258,7 @@ async function getResponse(event, client, requestId) {
       type: 'REQUEST',
       payload: {
         id: requestId,
+        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },

public/mockServiceWorker.js

@@ -17,6 +17,7 @@ function fakeProps(withImage = false): RichTextEditorProps {
     value: `<p>${faker.animal.fish()}</p>`,
     onChange: vi.fn(),
     onImageUpload: withImage ? vi.fn() : undefined,
+    onImageRemove: withImage ? vi.fn() : undefined,
   };
 }
 
@@ -94,6 +95,9 @@ test('Calls onImageUpload as expected', async () => {
   // Wait for tip tap to initialize
   await new Promise((resolve) => setTimeout(resolve, 1000));
 
+  expect(props.onImageRemove).not.toHaveBeenCalled();
+  expect(props.onImageUpload).not.toHaveBeenCalled();
+
   const uploadInput = container.querySelector('input') as HTMLElement;
 
   const fakeFile = new File(
@@ -103,7 +107,7 @@ test('Calls onImageUpload as expected', async () => {
   );
   await user.upload(uploadInput, fakeFile);
 
-  expect(props.onImageUpload).toHaveBeenCalledWith(fakeFile);
+  expect(props.onImageUpload).toHaveBeenCalledExactlyOnceWith(fakeFile);
 });
 
 test('Open file dialog', async () => {

src/molecules/RichTextEditor/RichTextEditor.test.tsx

@@ -3,8 +3,6 @@ import { FC, useEffect, useRef, useState } from 'react';
 import { Container } from './Waves.styles';
 import { WaveStatic } from './WaveStatic';
 
-import { useScroll } from 'framer-motion';
-
 export interface WavesProps {
   gradientColors?: string[];
 }
@@ -13,9 +11,6 @@ export const Waves: FC<WavesProps> = ({ gradientColors }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [width, setWidth] = useState(containerRef.current?.clientWidth ?? 0);
   const [height, setHeight] = useState(containerRef.current?.clientHeight ?? 0);
-  const { scrollY } = useScroll({
-    container: { current: document.getElementById('content') },
-  });
 
   const handleSetRef = (element: HTMLDivElement | null) => {
     containerRef.current = element;
@@ -43,12 +38,7 @@ export const Waves: FC<WavesProps> = ({ gradientColors }) => {
   }, []);
 
   return (
-    <Container
-      ref={handleSetRef}
-      style={{
-        top: scrollY,
-      }}
-    >
+    <Container ref={handleSetRef}>
       <WaveStatic
         height={height}
         width={width}