Merge pull request #2261 from pie-framework/develop

fix: PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670

Author: CarlaCostea

packages/charting/src/mark-label.jsx

@@ -23,7 +23,7 @@ const StyledInput = styled('input')(({ theme }) => ({
   border: 'none',
   '&.correct': correct('color'),
   '&.incorrect': incorrect('color'),
-  '&.disabled': {
+  '&.disabledMarkLabel': {
     backgroundColor: 'transparent !important',
   },
   '&.error': { border: `2px solid ${theme.palette.error.main}` },
@@ -36,7 +36,7 @@ const StyledMathInput = styled('div')(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   color: color.primaryDark(),
   paddingTop: theme.typography.fontSize / 2,
-  '&.disabled': {
+  '&.disabledMarkLabel': {
     ...disabled('color'),
     backgroundColor: 'transparent !important',
   },
@@ -155,7 +155,7 @@ export const MarkLabel = (props) => {
             }
           }}
           className={classNames({
-            disabled: disabled,
+            disabledMarkLabel: disabled,
             error: error,
             correct: mark.editable && correctness?.label === 'correct',
             incorrect: mark.editable && correctness?.label === 'incorrect',
@@ -183,7 +183,7 @@ export const MarkLabel = (props) => {
           disabled={disabled}
           inputClassName={classNames(
             correctness && mark.editable ? correctness.label : null,
-            disabled && 'disabled',
+            disabled && 'disabledMarkLabel',
             error && 'error',
           )}
           inputStyle={{

packages/drag/src/__tests__/placeholder.test.jsx

@@ -29,7 +29,7 @@ describe('placeholder', () => {
     it('applies disabled class when disabled is true', () => {
       const { container } = renderComponent({ disabled: true });
       const placeholder = container.firstChild;
-      expect(placeholder).toHaveClass('disabled');
+      expect(placeholder).toHaveClass('placeholderDisabled');
     });
 
     it('applies custom className', () => {

packages/drag/src/placeholder.jsx

@@ -24,7 +24,7 @@ const StyledPlaceholder = styled('div')(({ theme }) => ({
     padding: theme.spacing(1),
     border: `2px dashed ${color.black()}`,
   },
-  '&.disabled': {
+  '&.placeholderDisabled': {
     boxShadow: 'none',
     background: theme.palette.background.paper,
   },
@@ -75,7 +75,13 @@ export const PlaceHolder = (props) => {
     extraStyles,
   } = props;
 
-  const names = classNames('placeholder', disabled && 'disabled', isOver && 'over', type, className);
+  const names = classNames(
+    'placeholder',
+    disabled && 'placeholderDisabled',
+    isOver && 'over',
+    type,
+    className,
+  );
 
   const style = {};
 

packages/editable-html-tip-tap/src/components/CharacterPicker.jsx

@@ -78,25 +78,52 @@ export function CharacterPicker({ editor, opts, onClose }) {
   useEffect(() => {
     if (!editor) return;
 
-    // Calculate position relative to selection
     const editorDOM = editor.options.element;
-    const editorRect = editorDOM.getBoundingClientRect();
-    const bodyRect = document.body.getBoundingClientRect();
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
+    const editorViewDom = editor.view.dom;
 
-    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
+    // Position is computed in viewport coordinates (the dialog uses position: fixed),
+    // so coordsAtPos / getBoundingClientRect values can be used directly without
+    // adding scroll offsets. The dialog is then clamped to the viewport so it does
+    // not get cut off by fixed page headers/footers.
+    const updatePosition = () => {
+      if (!containerRef.current) return;
 
-    if (editorRect.y > containerRef.current.offsetHeight) {
-      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
-    }
+      const editorRect = editorDOM.getBoundingClientRect();
+      const { from } = editor.state.selection;
+      const start = editor.view.coordsAtPos(from);
 
-    setPosition({
-      top: top,
-      left: start.left,
-    });
+      const dialogHeight = containerRef.current.offsetHeight;
+      const dialogWidth = containerRef.current.offsetWidth;
 
-    const editorViewDom = editor.view.dom;
+      // prefer below the editor; flip above when there isn't room below.
+      const spaceBelow = window.innerHeight - (editorRect.bottom + 60);
+      let top =
+        spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80
+          ? editorRect.bottom + 60
+          : editorRect.top - dialogHeight - 20;
+
+      let left = start.left;
+
+      const margin = 8;
+      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
+      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
+
+      setPosition({ top, left });
+    };
+
+    updatePosition();
+
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updatePosition();
+      });
+    };
+
+    window.addEventListener('scroll', scheduleUpdate, true);
+    window.addEventListener('resize', scheduleUpdate);
 
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
@@ -110,6 +137,9 @@ export function CharacterPicker({ editor, opts, onClose }) {
 
     return () => {
       clearTimeout(timeoutId);
+      if (frame !== null) cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', scheduleUpdate, true);
+      window.removeEventListener('resize', scheduleUpdate);
       document.removeEventListener('click', handleClickOutside);
     };
   }, [editor]);
@@ -131,11 +161,11 @@ export function CharacterPicker({ editor, opts, onClose }) {
           data-toolbar-for={editor.instanceId}
           style={{
             visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
-            position: 'absolute',
+            position: 'fixed',
             top: `${position.top}px`,
             left: `${position.left}px`,
             maxWidth: '500px',
-            zIndex: 99,
+            zIndex: 1000,
           }}
         >
           <div>

packages/editable-html-tip-tap/src/components/__tests__/CharacterPicker.test.jsx

@@ -234,7 +234,16 @@ describe('CharacterPicker', () => {
     };
     const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
     const dialog = container.querySelector('.insert-character-dialog');
-    expect(dialog).toHaveStyle({ position: 'absolute' });
+    expect(dialog).toHaveStyle({ position: 'fixed' });
+  });
+
+  it('renders above other editor overlays with a high z-index', () => {
+    const opts = {
+      characters: [['á']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveStyle({ zIndex: '1000' });
   });
 
   it('adds data-toolbar-for attribute with editor instanceId', () => {

packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx

@@ -10,9 +10,11 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
+const mockCreatePortal = jest.fn((node) => node);
+
 jest.mock('react-dom', () => ({
   ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
+  createPortal: (...args) => mockCreatePortal(...args),
 }));
 
 describe('InlineDropdown', () => {
@@ -77,6 +79,7 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockCreatePortal.mockClear();
     mockEditor = buildMockEditor();
     defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
@@ -211,14 +214,29 @@ describe('InlineDropdown', () => {
     expect(textContainer).toHaveStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
   });
 
-  it('renders toolbar with z-index', async () => {
-    const { container } = render(<InlineDropdown {...defaultProps} selected={true} />);
+  it('portals toolbar into editor container when _tiptapContainerEl is set', async () => {
+    const containerEl = document.createElement('div');
+    const editor = buildMockEditor({ _tiptapContainerEl: containerEl });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
+    await waitFor(() => {
+      expect(mockCreatePortal).toHaveBeenCalled();
+    });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(containerEl);
+  });
+
+  it('portals toolbar into document.body when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
     await waitFor(() => {
-      const toolbarContainer = container.querySelector('div[style*="zIndex"]');
-      if (toolbarContainer) {
-        expect(toolbarContainer).toHaveStyle({ zIndex: '1' });
-      }
+      expect(mockCreatePortal).toHaveBeenCalled();
     });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(document.body);
   });
 
   it('passes editorCallback to InlineDropdownToolbar', async () => {

packages/editable-html-tip-tap/src/components/common/toolbar-buttons.jsx

@@ -12,6 +12,11 @@ const StyledButton = styled('button', {
   background: 'none',
   border: 'none',
   cursor: disabled ? 'not-allowed' : 'pointer',
+  // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
+  '& svg': {
+    width: '24px',
+    height: '24px',
+  },
   '&:hover': {
     color: disabled ? 'grey' : 'black',
   },

packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx

@@ -175,14 +175,14 @@ const InlineDropdown = (props) => {
       {showToolbar && (
         <React.Fragment>
           {ReactDOM.createPortal(
-            <div ref={toolbarRef} style={{ zIndex: 1 }}>
+            <div ref={toolbarRef}>
               <InlineDropdownToolbar
                 editorCallback={(instance) => {
                   toolbarEditor.current = instance;
                 }}
               />
             </div>,
-            document.body,
+            editor?._tiptapContainerEl || document.body,
           )}
 
           {editor._tiptapContainerEl &&