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

package/src/components/__tests__/toolbar-buttons.test.jsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { Button, MarkButton, RawButton, RawMarkButton } from '../common/toolbar-buttons';
-
-describe('RawButton', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<RawButton onClick={jest.fn()}>Click me</RawButton>);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(<RawButton onClick={jest.fn()}>Test Button</RawButton>);
-    expect(getByText('Test Button')).toBeInTheDocument();
-  });
-
-  it('calls onClick on mouse down', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.mouseDown(getByText('Click'));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('prevents default on mouse down', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    const button = getByText('Click');
-    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
-    button.dispatchEvent(event);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('calls onClick on Enter key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: 'Enter' });
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('calls onClick on Space key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: ' ' });
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('does not call onClick on other key press', () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
-    fireEvent.keyDown(getByText('Click'), { key: 'a' });
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('applies active style when active is true', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} active={true}>
-        Active
-      </RawButton>,
-    );
-    const button = getByText('Active');
-    expect(button).toHaveStyle({ color: 'black' });
-  });
-
-  it('applies disabled style when disabled is true', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} disabled={true}>
-        Disabled
-      </RawButton>,
-    );
-    const button = getByText('Disabled');
-    expect(button).toHaveStyle({ cursor: 'not-allowed' });
-  });
-
-  it('applies extraStyles when provided', () => {
-    const extraStyles = { backgroundColor: 'red' };
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} extraStyles={extraStyles}>
-        Styled
-      </RawButton>,
-    );
-    const button = getByText('Styled');
-    expect(button).toHaveStyle({ backgroundColor: 'red' });
-  });
-
-  it('has aria-label when provided', () => {
-    const { getByLabelText } = render(
-      <RawButton onClick={jest.fn()} ariaLabel="Test Button">
-        Button
-      </RawButton>,
-    );
-    expect(getByLabelText('Test Button')).toBeInTheDocument();
-  });
-
-  it('has aria-pressed attribute', () => {
-    const { getByText } = render(
-      <RawButton onClick={jest.fn()} active={true}>
-        Button
-      </RawButton>,
-    );
-    expect(getByText('Button')).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('is focusable with tabIndex', () => {
-    const { getByText } = render(<RawButton onClick={jest.fn()}>Button</RawButton>);
-    expect(getByText('Button')).toHaveAttribute('tabIndex', '0');
-  });
-});
-
-describe('Button', () => {
-  it('is the same as RawButton', () => {
-    expect(Button).toBe(RawButton);
-  });
-});
-
-describe('RawMarkButton', () => {
-  it('renders without crashing', () => {
-    const { container } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        Bold
-      </RawMarkButton>,
-    );
-    expect(getByText('Bold')).toBeInTheDocument();
-  });
-
-  it('calls onToggle with mark on mouse down', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="italic" label="Italic">
-        I
-      </RawMarkButton>,
-    );
-    fireEvent.mouseDown(getByText('I'));
-    expect(onToggle).toHaveBeenCalledWith('italic');
-  });
-
-  it('prevents default on mouse down', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    const button = getByText('B');
-    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
-    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
-    button.dispatchEvent(event);
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('calls onToggle on Enter key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="underline" label="Underline">
-        U
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('U'), { key: 'Enter' });
-    expect(onToggle).toHaveBeenCalledWith('underline');
-  });
-
-  it('calls onToggle on Space key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="strike" label="Strike">
-        S
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('S'), { key: ' ' });
-    expect(onToggle).toHaveBeenCalledWith('strike');
-  });
-
-  it('does not call onToggle on other key press', () => {
-    const onToggle = jest.fn();
-    const { getByText } = render(
-      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    fireEvent.keyDown(getByText('B'), { key: 'a' });
-    expect(onToggle).not.toHaveBeenCalled();
-  });
-
-  it('applies active style when active is true', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
-        B
-      </RawMarkButton>,
-    );
-    const button = getByText('B');
-    expect(button).toHaveStyle({ color: 'black' });
-  });
-
-  it('has aria-label from label prop', () => {
-    const { getByLabelText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Toggle Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(getByLabelText('Toggle Bold')).toBeInTheDocument();
-  });
-
-  it('has aria-pressed attribute', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
-        B
-      </RawMarkButton>,
-    );
-    expect(getByText('B')).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('is focusable with tabIndex', () => {
-    const { getByText } = render(
-      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
-        B
-      </RawMarkButton>,
-    );
-    expect(getByText('B')).toHaveAttribute('tabIndex', '0');
-  });
-});
-
-describe('MarkButton', () => {
-  it('is the same as RawMarkButton', () => {
-    expect(MarkButton).toBe(RawMarkButton);
-  });
-});

package/src/components/characters/characterUtils.js

@@ -1,447 +0,0 @@
-export const spanishConfig = {
-  characters: [
-    ['á', 'é', 'í', 'ó', 'ú'],
-    ['Á', 'É', 'Í', 'Ó', 'Ú'],
-    ['—', '«', '»', 'ñ', 'ü'],
-    ['-', '¿', '¡', 'Ñ', 'Ü'],
-  ],
-};
-
-export const specialConfig = {
-  hasPreview: true,
-  characters: [
-    [
-      {
-        unicode: 'U+00A2',
-        description: 'CENT SIGN',
-        write: '¢',
-        label: '¢',
-      },
-      {
-        unicode: 'U+00BF',
-        description: 'INVERTED QUESTION MARK',
-        write: '¿',
-        label: '¿',
-      },
-      {
-        unicode: 'U+00B4',
-        description: 'ACUTE ACCENT',
-        write: '´',
-        label: '´',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E1',
-        description: 'LATIN SMALL LETTER A WITH ACUTE',
-        write: 'á',
-        label: 'á',
-      },
-      {
-        unicode: 'U+00E9',
-        description: 'LATIN SMALL LETTER E WITH ACUTE',
-        write: 'é',
-        label: 'é',
-      },
-      {
-        unicode: 'U+00ED',
-        description: 'LATIN SMALL LETTER I WITH ACUTE',
-        write: 'í',
-        label: 'í',
-      },
-      {
-        unicode: 'U+00F3',
-        description: 'LATIN SMALL LETTER O WITH ACUTE',
-        write: 'ó',
-        label: 'ó',
-      },
-      {
-        unicode: 'U+00FA',
-        description: 'LATIN SMALL LETTER U WITH ACUTE',
-        write: 'ú',
-        label: 'ú',
-      },
-      {
-        unicode: 'U+00F1',
-        description: 'LATIN SMALL LETTER N WITH TILDE',
-        write: 'ñ',
-        label: 'ñ',
-      },
-    ],
-    [
-      {
-        unicode: 'U+20AC',
-        description: 'EURO SIGN',
-        write: '€',
-        label: '€',
-      },
-      {
-        unicode: 'U+00A1',
-        description: 'INVERTED EXCLAMATION MARK',
-        write: '¡',
-        label: '¡',
-      },
-      {
-        unicode: 'U+00C1',
-        description: 'LATIN CAPITAL LETTER A WITH ACUTE',
-        write: 'Á',
-        label: 'Á',
-      },
-      {
-        unicode: 'U+00C9',
-        description: 'LATIN CAPITAL LETTER E WITH ACUTE',
-        write: 'É',
-        label: 'É',
-      },
-      {
-        unicode: 'U+00CD',
-        description: 'LATIN CAPITAL LETTER I WITH ACUTE',
-        write: 'Í',
-        label: 'Í',
-      },
-      {
-        unicode: 'U+00D3',
-        description: 'LATIN CAPITAL LETTER O WITH ACUTE',
-        write: 'Ó',
-        label: 'Ó',
-      },
-      {
-        unicode: 'U+00DA',
-        description: 'LATIN CAPITAL LETTER U WITH ACUTE',
-        write: 'Ú',
-        label: 'Ú',
-      },
-      {
-        unicode: 'U+00D1',
-        description: 'LATIN CAPITAL LETTER N WITH TILDE',
-        write: 'Ñ',
-        label: 'Ñ',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A3',
-        description: 'POUND SIGN',
-        write: '£',
-        label: '£',
-      },
-      {
-        unicode: 'U+00AB',
-        description: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK',
-        write: '«',
-        label: '«',
-      },
-      {
-        unicode: 'U+005E',
-        description: 'CIRCUMFLEX ACCENT',
-        write: '^',
-        label: '^',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E2',
-        description: 'LATIN SMALL LETTER A WITH CIRCUMFLEX',
-        write: 'â',
-        label: 'â',
-      },
-      {
-        unicode: 'U+00EA',
-        description: 'LATIN SMALL LETTER E WITH CIRCUMFLEX',
-        write: 'ê',
-        label: 'ê',
-      },
-      {
-        unicode: 'U+00EE',
-        description: 'LATIN SMALL LETTER I WITH CIRCUMFLEX',
-        write: 'î',
-        label: 'î',
-      },
-      {
-        unicode: 'U+00F4',
-        description: 'LATIN SMALL LETTER O WITH CIRCUMFLEX',
-        write: 'ô',
-        label: 'ô',
-      },
-      {
-        unicode: 'U+00FB',
-        description: 'LATIN SMALL LETTER U WITH CIRCUMFLEX',
-        write: 'û',
-        label: 'û',
-      },
-      {
-        unicode: 'U+00E7',
-        description: 'LATIN SMALL LETTER C WITH CEDILLA',
-        write: 'ç',
-        label: 'ç',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A5',
-        description: 'YEN SIGN',
-        write: '¥',
-        label: '¥',
-      },
-      {
-        unicode: 'U+00BB',
-        description: 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK',
-        write: '»',
-        label: '»',
-      },
-      {
-        unicode: 'U+00C2',
-        description: 'LATIN CAPITAL LETTER A WITH CIRCUMFLEX',
-        write: 'Â',
-        label: 'Â',
-      },
-      {
-        unicode: 'U+00CA',
-        description: 'LATIN CAPITAL LETTER E WITH CIRCUMFLEX',
-        write: 'Ê',
-        label: 'Ê',
-      },
-      {
-        unicode: 'U+00CE',
-        description: 'LATIN CAPITAL LETTER I WITH CIRCUMFLEX',
-        write: 'Î',
-        label: 'Î',
-      },
-      {
-        unicode: 'U+00D4',
-        description: 'LATIN CAPITAL LETTER O WITH CIRCUMFLEX',
-        write: 'Ô',
-        label: 'Ô',
-      },
-      {
-        unicode: 'U+00DB',
-        description: 'LATIN CAPITAL LETTER U WITH CIRCUMFLEX',
-        write: 'Û',
-        label: 'Û',
-      },
-      {
-        unicode: 'U+00C7',
-        description: 'LATIN CAPITAL LETTER C WITH CEDILLA',
-        write: 'Ç',
-        label: 'Ç',
-      },
-    ],
-    [
-      {
-        unicode: 'U+200A',
-        description: 'HAIR SPACE',
-        write: String.fromCodePoint('0x200A'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+00A7',
-        description: 'SECTION SIGN',
-        write: '§',
-        label: '§',
-      },
-      {
-        unicode: 'U+00A8',
-        description: 'DIAERESIS',
-        write: '¨',
-        label: '¨',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E4',
-        description: 'LATIN SMALL LETTER A WITH DIAERESIS',
-        write: 'ä',
-        label: 'ä',
-      },
-      {
-        unicode: 'U+00EB',
-        description: 'LATIN SMALL LETTER E WITH DIAERESIS',
-        write: 'ë',
-        label: 'ë',
-      },
-      {
-        unicode: 'U+00EF',
-        description: 'LATIN SMALL LETTER I WITH DIAERESIS',
-        write: 'ï',
-        label: 'ï',
-      },
-      {
-        unicode: 'U+00F6',
-        description: 'LATIN SMALL LETTER O WITH DIAERESIS',
-        write: 'ö',
-        label: 'ö',
-      },
-      {
-        unicode: 'U+00FC',
-        description: 'LATIN SMALL LETTER U WITH DIAERESIS',
-        write: 'ü',
-        label: 'ü',
-      },
-      {
-        unicode: 'U+00DF',
-        description: 'LATIN SMALL LETTER SHARP S',
-        write: 'ß',
-        label: 'ß',
-      },
-    ],
-    [
-      {
-        unicode: 'U+2009',
-        description: 'THIN SPACE',
-        write: String.fromCodePoint('0x2009'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+2026',
-        description: 'HORIZONTAL ELLIPSIS',
-        write: '…',
-        label: '…',
-      },
-      {
-        unicode: 'U+00C4',
-        description: 'LATIN CAPITAL LETTER A WITH DIAERESIS',
-        write: 'Ä',
-        label: 'Ä',
-      },
-      {
-        unicode: 'U+00CB',
-        description: 'LATIN CAPITAL LETTER E WITH DIAERESIS',
-        write: 'Ë',
-        label: 'Ë',
-      },
-      {
-        unicode: 'U+00CF',
-        description: 'LATIN CAPITAL LETTER I WITH DIAERESIS',
-        write: 'Ï',
-        label: 'Ï',
-      },
-      {
-        unicode: 'U+00D6',
-        description: 'LATIN CAPITAL LETTER O WITH DIAERESIS',
-        write: 'Ö',
-        label: 'Ö',
-      },
-      {
-        unicode: 'U+00DC',
-        description: 'LATIN CAPITAL LETTER U WITH DIAERESIS',
-        write: 'Ü',
-        label: 'Ü',
-      },
-      {
-        unicode: 'U+2212',
-        description: 'MINUS SIGN',
-        write: '−',
-        label: '−',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A0',
-        description: 'NO-BREAK SPACE',
-        write: String.fromCodePoint('0x00A0'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+2022',
-        description: 'BULLET',
-        write: '•',
-        label: '•',
-      },
-      {
-        unicode: 'U+0060',
-        description: 'GRAVE ACCENT',
-        write: '`',
-        label: '`',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E0',
-        description: 'LATIN SMALL LETTER A WITH GRAVE',
-        write: 'à',
-        label: 'à',
-      },
-      {
-        unicode: 'U+00E8',
-        description: 'LATIN SMALL LETTER E WITH GRAVE',
-        write: 'è',
-        label: 'è',
-      },
-      {
-        unicode: 'U+00EC',
-        description: 'LATIN SMALL LETTER I WITH GRAVE',
-        write: 'ì',
-        label: 'ì',
-      },
-      {
-        unicode: 'U+00F2',
-        description: 'LATIN SMALL LETTER O WITH GRAVE',
-        write: 'ò',
-        label: 'ò',
-      },
-      {
-        unicode: 'U+00F9',
-        description: 'LATIN SMALL LETTER U WITH GRAVE',
-        write: 'ù',
-        label: 'ù',
-      },
-      {
-        unicode: 'U+2013',
-        description: 'EN DASH',
-        write: '–',
-        label: '–',
-      },
-    ],
-    [
-      {
-        unicode: 'U+2003',
-        description: 'EM SPACE',
-        write: String.fromCodePoint('0x2003'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+25E6',
-        description: 'WHITE BULLET',
-        write: '◦',
-        label: '◦',
-      },
-      {
-        unicode: 'U+00C0',
-        description: 'LATIN CAPITAL LETTER A WITH GRAVE',
-        write: 'À',
-        label: 'À',
-      },
-      {
-        unicode: 'U+00C8',
-        description: 'LATIN CAPITAL LETTER E WITH GRAVE',
-        write: 'È',
-        label: 'È',
-      },
-      {
-        unicode: 'U+00CC',
-        description: 'LATIN CAPITAL LETTER I WITH GRAVE',
-        write: 'Ì',
-        label: 'Ì',
-      },
-      {
-        unicode: 'U+00D2',
-        description: 'LATIN CAPITAL LETTER O WITH GRAVE',
-        write: 'Ò',
-        label: 'Ò',
-      },
-      {
-        unicode: 'U+00D9',
-        description: 'LATIN CAPITAL LETTER U WITH GRAVE',
-        write: 'Ù',
-        label: 'Ù',
-      },
-      {
-        unicode: 'U+2014',
-        description: 'EM DASH',
-        write: '—',
-        label: '—',
-      },
-    ],
-  ],
-};
-
-export const characterIcons = {
-  spanish: 'ñ',
-  special: '€',
-};

package/src/components/characters/custom-popper.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Popper from '@mui/material/Popper';
-import Typography from '@mui/material/Typography';
-
-const StyledPopper = styled(Popper)({
-  background: '#fff',
-  padding: '10px',
-  pointerEvents: 'none',
-  zIndex: 99999,
-});
-
-const StyledTypography = styled(Typography)({
-  fontSize: 50,
-  textAlign: 'center',
-});
-
-const CustomPopper = ({ children, ...props }) => (
-  <StyledPopper
-    id="mouse-over-popover"
-    open
-    anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'left',
-    }}
-    transformOrigin={{
-      vertical: 'top',
-      horizontal: 'left',
-    }}
-    disableRestoreFocus
-    disableAutoFocus
-    {...props}
-  >
-    <StyledTypography>{children}</StyledTypography>
-  </StyledPopper>
-);
-
-export default CustomPopper;