feat: use DS for RichText attributes (#586)

* feat: use DS for RichText attributes

apps/data-studio/package.json

@@ -13,7 +13,7 @@
         "antd": "5.15.3",
         "apollo-cache-inmemory": "1.6.6",
         "apollo-upload-client": "14.1.3",
-        "aristid-ds": "9.0.0-dd980fc",
+        "aristid-ds": "10.0.0-1473f00",
         "dayjs": "1.11.10",
         "graphql": "15.0.0",
         "graphql-tag": "2.12.6",

apps/login/package.json

@@ -7,7 +7,7 @@
     "@ant-design/icons": "5.2.6",
     "@leav/ui": "workspace:libs/ui",
     "antd": "5.15.3",
-    "aristid-ds": "9.0.0-dd980fc",
+    "aristid-ds": "10.0.0-1473f00",
     "i18next": "22.5.0",
     "i18next-browser-languagedetector": "7.0.2",
     "i18next-http-backend": "2.1.1",

apps/portal/package.json

@@ -8,7 +8,7 @@
     "@leav/ui": "workspace:libs/ui",
     "@leav/utils": "workspace:libs/utils",
     "antd": "5.15.3",
-    "aristid-ds": "9.0.0-dd980fc",
+    "aristid-ds": "10.0.0-1473f00",
     "cross-fetch": "3.1.5",
     "graphql-ws": "5.12.0",
     "i18next": "22.5.0",

libs/ui/package.json

@@ -50,7 +50,7 @@
     "@ant-design/icons": ">=5.2",
     "@apollo/client": ">=3.8.1",
     "antd": "5.15.3",
-    "aristid-ds": ">=8.0.0",
+    "aristid-ds": "10.0.0-1473f00",
     "dayjs": "^1.11.10",
     "i18next": "22.5",
     "react": "18.2.0",

libs/ui/src/_tests/testUtils.tsx

@@ -50,7 +50,8 @@ const Providers = ({children, mocks, cacheSettings, routerProps}: PropsWithChild
 };
 
 // Wrapper around testing-library's render to automatically render apollo's provider and redux store provider
-const renderWithProviders = (ui: ReactElement, options?: ICustomRenderOptions): RenderResult => render(ui, {wrapper: props => <Providers {...props} {...options} />, ...options});
+const renderWithProviders = (ui: ReactElement, options?: ICustomRenderOptions): RenderResult =>
+    render(ui, {wrapper: props => <Providers {...props} {...options} />, ...options});
 
 const renderHookWithProviders = <
     Result,
@@ -63,8 +64,51 @@ const renderHookWithProviders = <
     options?: ICustomRenderHookOptions<Props, Q, Container, BaseElement>
 ) => renderHook(hook, {wrapper: props => <Providers {...props} {...options} />, ...options});
 
+const mockBrowserFunctionsForTiptap = () => {
+    const originalElementFromPoint = document.elementFromPoint;
+    const originalHTMLElementGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+    const originalHTMLElementGetClientRects = HTMLElement.prototype.getClientRects;
+    const originalRangeGetBoundingClientRect = Range.prototype.getBoundingClientRect;
+    const originalRangeGetClientRects = Range.prototype.getClientRects;
+
+    function getBoundingClientRect(): DOMRect {
+        const rec = {
+            x: 0,
+            y: 0,
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0
+        };
+        return {...rec, toJSON: () => rec};
+    }
+
+    class FakeDOMRectList extends Array<DOMRect> implements DOMRectList {
+        item(index: number): DOMRect | null {
+            return this[index];
+        }
+    }
+
+    document.elementFromPoint = (): null => null;
+    HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect;
+    HTMLElement.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList();
+    Range.prototype.getBoundingClientRect = getBoundingClientRect;
+    Range.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList();
+
+    return () => {
+        document.elementFromPoint = originalElementFromPoint;
+        HTMLElement.prototype.getBoundingClientRect = originalHTMLElementGetBoundingClientRect;
+        HTMLElement.prototype.getClientRects = originalHTMLElementGetClientRects;
+        Range.prototype.getBoundingClientRect = originalRangeGetBoundingClientRect;
+        Range.prototype.getClientRects = originalRangeGetClientRects;
+    };
+};
+
 // Re-export everything from testing-library to improve DX. You can everything you need from this file when you use this
 // custom render
 export * from '@testing-library/react';
+export {mockBrowserFunctionsForTiptap};
 export {renderWithProviders as render};
 export {renderHookWithProviders as renderHook};

libs/ui/src/components/RecordEdition/EditRecordContent/antdUtils.tsx

@@ -62,6 +62,7 @@ export const getAntdFormInitialValues = (recordForm: IRecordForm) =>
 
         switch (attribute.format) {
             case AttributeFormat.text:
+            case AttributeFormat.rich_text:
             case AttributeFormat.boolean:
                 acc[attribute.id] = standardValue.raw_value;
                 break;

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldRichText.test.tsx

@@ -1,7 +1,7 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {render, screen, waitFor} from '_ui/_tests/testUtils';
+import {mockBrowserFunctionsForTiptap, render, screen, waitFor} from '_ui/_tests/testUtils';
 import userEvent from '@testing-library/user-event';
 import StandardField from '../StandardField';
 import {
@@ -18,6 +18,12 @@ import {mockFormElementInput} from '_ui/__mocks__/common/form';
 import {mockFormAttribute} from '_ui/__mocks__/common/attribute';
 import {Suspense} from 'react';
 
+const tiptapCleanup = mockBrowserFunctionsForTiptap();
+
+afterAll(() => {
+    tiptapCleanup();
+});
+
 describe('StandardField, Rich Text input', () => {
     const mockRecordValuesCommon = {
         created_at: 123456789,
@@ -99,25 +105,17 @@ describe('StandardField, Rich Text input', () => {
             </Suspense>
         );
 
-        await waitFor(
-            () => {
-                screen.getByTestId('ckeditor');
-            },
-            {timeout: 5000}
-        );
-
-        const richTextElem = screen.getByTestId('ckeditor');
+        const richTextElem = screen.getByRole('textbox');
         await userEvent.click(richTextElem);
 
-        const richTextElemOpen = screen.getByRole('textbox');
+        const richTextElemOpen = richTextElem.parentElement.previousSibling as HTMLElement;
+        const menuBarClassNames = richTextElemOpen?.getAttribute('class');
+        expect(menuBarClassNames).toContain('menu-bar');
         expect(richTextElemOpen).toBeInTheDocument();
 
-        await userEvent.click(richTextElemOpen);
-
-        const toolBarElem = screen.getByRole('toolbar');
-        expect(toolBarElem).toBeInTheDocument();
+        await userEvent.type(richTextElem, 'new value');
 
-        await userEvent.click(screen.getByRole('button', {name: 'global.submit'}));
+        await userEvent.click(document.body);
         expect(mockHandleSubmit).toHaveBeenCalled();
     });
 });