@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/src/components/TiptapContainer.jsx

@@ -1,235 +0,0 @@
-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.style.whiteSpace = 'nowrap';
-      el.textContent = 'W'.repeat(props.charactersLimit);
-
-      // Copy font styles from the editor container so the width measurement reflects the actual font
-      const computedStyles = window.getComputedStyle(rootRef.current);
-      const fontStyleProps = [
-        'fontFamily',
-        'fontSize',
-        'fontWeight',
-        'fontStyle',
-        'letterSpacing',
-        'wordSpacing',
-        'textTransform',
-        'lineHeight',
-      ];
-
-      fontStyleProps.forEach((prop) => {
-        el.style[prop] = computedStyles[prop];
-      });
-
-      document.body.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

@@ -1,147 +0,0 @@
-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

@@ -1,270 +0,0 @@
-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: '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', () => {
-    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

@@ -1,46 +0,0 @@
-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' });
-  });
-});