@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.36

package/src/components/TiptapContainer.jsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { valueToSize } from '../utils/size';
+
+import StyledMenuBar from './MenuBar';
+
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),
+})(({ theme, noBorder, error }) => ({
+  position: 'relative',
+  padding: '0px',
+  border: noBorder ? 'none' : '1px solid #ccc',
+  borderRadius: '4px',
+  cursor: 'text',
+  '& [data-slate-editor="true"]': {
+    wordBreak: 'break-word',
+    overflow: 'visible',
+    maxHeight: '500px',
+    padding: '5px',
+  },
+  '&:first-child': {
+    marginTop: 0,
+  },
+  '& ul, & ol': {
+    padding: '0 1rem',
+    margin: '1.25rem 1rem 1.25rem 0.4rem',
+  },
+  '& ul li p, & ol li p': {
+    marginTop: '0.25em',
+    marginBottom: '0.25em',
+  },
+  '& h1, & h2, & h3, & h4, & h5, & h6': {
+    lineHeight: 1.1,
+    marginTop: '2.5rem',
+    textWrap: 'pretty',
+  },
+  '& h1, & h2': {
+    marginTop: '3.5rem',
+    marginBottom: '1.5rem',
+  },
+  '& h1': {
+    fontSize: '1.4rem',
+  },
+  '& h2': {
+    fontSize: '1.2rem',
+  },
+  '& h3': {
+    fontSize: '1.1rem',
+  },
+  '& h4, & h5, & h6': {
+    fontSize: '1rem',
+  },
+  '& code': {
+    backgroundColor: 'var(--purple-light)',
+    borderRadius: '0.4rem',
+    color: 'var(--black)',
+    fontSize: '0.85rem',
+    padding: '0.25em 0.3em',
+  },
+  '& pre': {
+    background: 'var(--black)',
+    borderRadius: '0.5rem',
+    color: 'var(--white)',
+    fontFamily: '\'JetBrainsMono\', monospace',
+    margin: '1.5rem 0',
+    padding: '0.75rem 1rem',
+    '& code': {
+      background: 'none',
+      color: 'inherit',
+      fontSize: '0.8rem',
+      padding: 0,
+    },
+  },
+  '& blockquote': {
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
+  },
+  '& p': {
+    margin: '0',
+  },
+  '& table': {
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
+  '& table:not([border="1"]) tr': {
+    borderTop: '1px solid #dfe2e5',
+  },
+  '& td, th': {
+    padding: '.6em 1em',
+    textAlign: 'center',
+  },
+  '& table:not([border="1"]) td, th': {
+    border: '1px solid #dfe2e5',
+  },
+  ...(error && {
+    border: `2px solid ${theme.palette.error.main} !important`,
+  }),
+}));
+
+const StyledEditorHolder = styled('div', {
+  shouldForwardProp: (prop) => !['disableScrollbar', 'highlightShape'].includes(prop),
+})(({ theme, disableScrollbar, highlightShape }) => ({
+  position: 'relative',
+  padding: '0px',
+  overflowY: 'auto',
+  color: color.text(),
+  backgroundColor: highlightShape ? theme.palette.action.selected : color.background(),
+  ...(disableScrollbar && {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  }),
+}));
+
+const StyledChildren = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})(({ noPadding }) => ({
+  padding: noPadding ? 0 : '10px 8px',
+}));
+
+function TiptapContainer(props) {
+  const [adjustedWidth, setAdjustedWidth] = useState(null);
+  const rootRef = useRef(null);
+  const {
+    editor,
+    disabled,
+    children,
+    disableScrollbar,
+    activePlugins,
+    toolbarOpts,
+    responseAreaProps,
+    autoFocus,
+    minWidth,
+    width,
+    maxWidth,
+    minHeight,
+    height,
+    maxHeight,
+    highlightShape,
+    ref,
+  } = props;
+
+  useEffect(() => {
+    if (editor && rootRef.current) {
+      editor._tiptapContainerEl = rootRef.current;
+    }
+  }, [editor, rootRef.current]);
+
+  useEffect(() => {
+    if (editor && autoFocus) {
+      Promise.resolve().then(() => {
+        editor.commands.focus('end');
+      });
+    }
+  }, [editor, autoFocus]);
+
+  useEffect(() => {
+    if (props.adjustWidthForLimit) {
+      const el = document.createElement('p');
+
+      el.style.visibility = 'hidden';
+      el.style.position = 'absolute';
+      el.textContent = 'W'.repeat(props.charactersLimit);
+
+      rootRef.current.appendChild(el);
+
+      setAdjustedWidth(`${el.offsetWidth + 27}px`);
+
+      el.remove();
+    }
+  }, [props.adjustWidthForLimit, props.charactersLimit]);
+
+  const sizeStyle = useMemo(
+    () => ({
+      width: valueToSize(adjustedWidth || width),
+      minWidth: valueToSize(minWidth),
+      maxWidth: valueToSize(maxWidth),
+      height: valueToSize(height),
+      minHeight: valueToSize(minHeight),
+      maxHeight: valueToSize(maxHeight),
+    }),
+    [adjustedWidth, minWidth, width, maxWidth, minHeight, height, maxHeight],
+  );
+
+  return (
+    <StyledRoot
+      noBorder={toolbarOpts && toolbarOpts.noBorder}
+      error={toolbarOpts && toolbarOpts.error}
+      className={props.className}
+      style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
+      ref={rootRef}
+    >
+      <StyledEditorHolder disableScrollbar={disableScrollbar} highlightShape={highlightShape}>
+        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>
+      </StyledEditorHolder>
+
+      {editor && (
+        <StyledMenuBar
+          editor={editor}
+          responseAreaProps={responseAreaProps}
+          toolbarOpts={toolbarOpts}
+          activePlugins={activePlugins}
+          onChange={props.onChange}
+          autoWidthToolbar={props.autoWidthToolbar}
+        />
+      )}
+    </StyledRoot>
+  );
+}
+
+export default TiptapContainer;

package/src/components/__tests__/AltDialog.test.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { AltDialog } from '../image/AltDialog';
+
+jest.mock('@mui/material/Dialog', () => ({
+  __esModule: true,
+  default: ({ children, open, id }) => open && <div id={id}>{children}</div>,
+}));
+
+jest.mock('@mui/material/DialogContent', () => ({
+  __esModule: true,
+  default: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('@mui/material/DialogActions', () => ({
+  __esModule: true,
+  default: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('@mui/material/Button', () => ({
+  __esModule: true,
+  default: ({ children, onClick }) => <button onClick={onClick}>{children}</button>,
+}));
+
+jest.mock('@mui/material/TextField', () => ({
+  __esModule: true,
+  default: ({ value, onChange, placeholder, helperText, FormHelperTextProps, multiline }) => (
+    <div className="MuiTextField-root">
+      <textarea value={value || ''} onChange={onChange} placeholder={placeholder} data-multiline={multiline} />
+      {helperText && <div style={FormHelperTextProps?.style}>{helperText}</div>}
+    </div>
+  ),
+}));
+
+jest.mock('@mui/icons-material/ArrowBackIos', () => ({
+  __esModule: true,
+  default: () => <svg data-testid="arrow-back-icon" />,
+}));
+
+describe('AltDialog', () => {
+  const defaultProps = {
+    onDone: jest.fn(),
+    alt: 'Initial alt text',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders with initial alt text', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('Initial alt text');
+  });
+
+  it('renders placeholder text', () => {
+    const { getByPlaceholderText } = render(<AltDialog {...defaultProps} alt="" />);
+    expect(getByPlaceholderText('Enter an Alt Text description of this image')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    const { getByText } = render(<AltDialog {...defaultProps} />);
+    expect(
+      getByText(
+        'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders Done button', () => {
+    const { getByText } = render(<AltDialog {...defaultProps} />);
+    expect(getByText('Done')).toBeInTheDocument();
+  });
+
+  it('renders ArrowBackIos icon', () => {
+    const { getByTestId } = render(<AltDialog {...defaultProps} />);
+    expect(getByTestId('arrow-back-icon')).toBeInTheDocument();
+  });
+
+  it('updates value on text field change', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    fireEvent.change(textarea, { target: { value: 'New alt text' } });
+    expect(textarea.value).toBe('New alt text');
+  });
+
+  it('calls onDone with value when Done button is clicked', () => {
+    const onDone = jest.fn();
+    // Mock document.querySelectorAll to avoid DOM manipulation issues
+    const mockQuerySelectorAll = jest.spyOn(document, 'querySelectorAll').mockReturnValue([]);
+
+    const { getByText, container } = render(<AltDialog {...defaultProps} onDone={onDone} />);
+    const textarea = container.querySelector('textarea');
+    fireEvent.change(textarea, { target: { value: 'Updated alt text' } });
+    fireEvent.click(getByText('Done'));
+    expect(onDone).toHaveBeenCalledWith('Updated alt text');
+
+    mockQuerySelectorAll.mockRestore();
+  });
+
+  it('closes dialog when Done button is clicked', () => {
+    // Mock document.querySelectorAll to avoid DOM manipulation issues
+    const mockQuerySelectorAll = jest.spyOn(document, 'querySelectorAll').mockReturnValue([]);
+
+    const { getByText, container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('#text-dialog');
+    expect(dialog).toBeInTheDocument();
+    fireEvent.click(getByText('Done'));
+
+    mockQuerySelectorAll.mockRestore();
+  });
+
+  it('dialog is open', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('[id="text-dialog"]');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('has correct dialog props', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('[id="text-dialog"]');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('text field is multiline', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.getAttribute('data-multiline')).toBe('true');
+  });
+
+  it('renders without alt text', () => {
+    const { getByPlaceholderText } = render(<AltDialog {...defaultProps} alt={undefined} />);
+    expect(getByPlaceholderText('Enter an Alt Text description of this image')).toBeInTheDocument();
+  });
+
+  it('handles empty alt text', () => {
+    const { container } = render(<AltDialog {...defaultProps} alt="" />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('');
+  });
+});

package/src/components/__tests__/CharacterPicker.test.jsx

@@ -0,0 +1,261 @@
+import React from 'react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { CharacterIcon, CharacterPicker } from '../CharacterPicker';
+
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: (node) => node,
+}));
+
+jest.mock('@pie-lib/math-toolbar', () => ({
+  PureToolbar: ({ onChange, onDone, additionalKeys }) => (
+    <div data-testid="pure-toolbar">
+      <button onClick={() => onChange('á')} data-testid="char-button">
+        á
+      </button>
+      <button onClick={onDone} data-testid="done-button">
+        Done
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock('../characters/custom-popper', () => ({
+  __esModule: true,
+  default: ({ children, onClose }) => (
+    <div data-testid="custom-popper">
+      {children}
+      <button onClick={onClose} data-testid="close-popper">
+        Close
+      </button>
+    </div>
+  ),
+}));
+
+describe('CharacterIcon', () => {
+  it('renders with letter', () => {
+    const { getByText } = render(<CharacterIcon letter="ñ" />);
+    expect(getByText('ñ')).toBeInTheDocument();
+  });
+
+  it('renders with correct styling', () => {
+    const { container } = render(<CharacterIcon letter="€" />);
+    const div = container.firstChild;
+    expect(div).toHaveStyle({ fontSize: '24px', lineHeight: '24px' });
+  });
+});
+
+describe('CharacterPicker', () => {
+  const mockEditor = {
+    chain: jest.fn(() => ({
+      focus: jest.fn(() => ({
+        insertContent: jest.fn(() => ({ run: jest.fn() })),
+      })),
+    })),
+    options: {
+      element: document.createElement('div'),
+    },
+    view: {
+      coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
+      dom: document.createElement('div'),
+    },
+    state: {
+      selection: { from: 0 },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset the element to avoid "Cannot redefine property" error
+    mockEditor.options.element = document.createElement('div');
+    Object.defineProperty(mockEditor.options.element, 'getBoundingClientRect', {
+      value: jest.fn(() => ({ top: 0, left: 0, height: 100 })),
+      configurable: true,
+    });
+  });
+
+  it('returns null when opts has no characters', () => {
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={{}} onClose={jest.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns null when opts is not provided', () => {
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={null} onClose={jest.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders character picker with spanish config', () => {
+    const opts = {
+      language: 'spanish',
+      characters: [['á', 'é', 'í']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('renders character picker with special config', () => {
+    const opts = {
+      language: 'special',
+      characters: [['€', '£']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('handles character insertion', () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    fireEvent.click(getByTestId('char-button'));
+    expect(mockEditor.chain).toHaveBeenCalled();
+  });
+
+  it('calls onClose when done button is clicked', () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+    fireEvent.click(getByTestId('done-button'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('closes on outside click', async () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+    fireEvent.click(document.body);
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('does not re-run positioning when only onClose reference changes', async () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const getRect = mockEditor.options.element.getBoundingClientRect;
+    const { rerender } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    const callsAfterMount = getRect.mock.calls.length;
+    expect(callsAfterMount).toBeGreaterThan(0);
+
+    rerender(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+
+    expect(getRect.mock.calls.length).toBe(callsAfterMount);
+  });
+
+  it('outside click invokes the latest onClose after rerender', async () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const onCloseFirst = jest.fn();
+    const { rerender } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onCloseFirst} />);
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    const onCloseSecond = jest.fn();
+    rerender(<CharacterPicker editor={mockEditor} opts={opts} onClose={onCloseSecond} />);
+
+    fireEvent.click(document.body);
+
+    await waitFor(() => {
+      expect(onCloseSecond).toHaveBeenCalled();
+    });
+    expect(onCloseFirst).not.toHaveBeenCalled();
+  });
+
+  it('does not close when clicking inside picker', async () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+
+    await waitFor(() => {
+      const picker = container.querySelector('.insert-character-dialog');
+      if (picker) {
+        fireEvent.mouseDown(picker);
+      }
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('renders with custom opts structure', () => {
+    const opts = {
+      characters: [
+        [
+          { name: 'a', write: 'á', label: 'á' },
+          { name: 'e', write: 'é', label: 'é' },
+        ],
+      ],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('renders with hasPreview option', () => {
+    const opts = {
+      hasPreview: true,
+      characters: [
+        [
+          {
+            name: 'euro',
+            write: '€',
+            label: '€',
+            description: 'Euro sign',
+            unicode: 'U+20AC',
+          },
+        ],
+      ],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('calculates position correctly', () => {
+    const opts = {
+      characters: [['á']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveStyle({ position: 'absolute' });
+  });
+
+  it('adds data-toolbar-for attribute with editor instanceId', () => {
+    const editorWithInstanceId = {
+      ...mockEditor,
+      instanceId: 'editor-123',
+    };
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={editorWithInstanceId} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveAttribute('data-toolbar-for', 'editor-123');
+  });
+
+  it('renders without instanceId gracefully', () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/CssIcon.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CssIcon from '../icons/CssIcon';
+
+describe('CssIcon', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<CssIcon />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders CSS text', () => {
+    const { getByText } = render(<CssIcon />);
+    expect(getByText('CSS')).toBeInTheDocument();
+  });
+
+  it('applies correct font family', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    // Font family is applied via styled component, just verify text renders
+    expect(element).toBeInTheDocument();
+  });
+
+  it('applies bold font weight', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ fontWeight: 'bold' });
+  });
+
+  it('has correct line height', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ lineHeight: '14px' });
+  });
+
+  it('has relative positioning', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ position: 'relative' });
+  });
+
+  it('has nowrap white space', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ whiteSpace: 'nowrap' });
+  });
+});