@pie-lib/editable-html-tip-tap 1.2.0-next.0 → 1.2.0-next.12

package/src/components/respArea/MathTemplated.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import { mq } from '@pie-lib/math-input';
+import { styled } from '@mui/material/styles';
+
+const StyledSpanContainer = styled('span')(() => ({
+  display: 'inline-flex',
+  border: '1px solid #C0C3CF',
+  margin: '1px 5px',
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  minHeight: '36px',
+  height: 'fit-content',
+}));
+
+const StyledResponseBox = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
+  display: 'inline-flex',
+  borderRight: '2px solid #C0C3CF',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  fontSize: '12px',
+  minHeight: '36px',
+  height: '100%',
+  alignItems: 'center',
+  fontFamily: 'Symbola, Times New Roman, serif',
+  padding: '0 2px',
+}));
+
+const StyledMathBlock = styled('div')(() => ({
+  flex: 8,
+  color: 'var(--pie-text, black)',
+  padding: '4px !important',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
+  '& > .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '1em !important',
+  },
+  '& > .mq-math-mode .mq-sqrt-stem': {
+    borderTop: '0.07em solid',
+    marginLeft: '-1.5px',
+    marginTop: '-2px !important',
+    paddingTop: '5px !important',
+  },
+  '& .mq-overarrow-inner': {
+    paddingTop: '0 !important',
+    border: 'none !important',
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    marginTop: '0px',
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important',
+    },
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px',
+    },
+    '&:after': {
+      top: '0px !important',
+      position: 'absolute !important',
+      right: '-2px',
+    },
+    '&.mq-empty:after': {
+      top: '-0.45em',
+    },
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px',
+    },
+  },
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important',
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important',
+  },
+}));
+const MathTemplated = (props) => {
+  const { node, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { value, index } = attributes;
+
+  // add 1 to index to display R 1 instead of R 0
+  const keyToDisplay = `R ${parseInt(index) + 1}`;
+
+  // console.log({nodeProps.children})
+  return (
+    <NodeViewWrapper
+      className="math-templated"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        minHeight: '36px',
+        minWidth: '50px',
+        cursor: 'pointer',
+      }}
+    >
+      <StyledSpanContainer {...attributes}>
+        <StyledResponseBox>{keyToDisplay}</StyledResponseBox>
+        <StyledMathBlock>
+          <mq.Static latex={value} />
+        </StyledMathBlock>
+      </StyledSpanContainer>
+    </NodeViewWrapper>
+  );
+};
+
+MathTemplated.propTypes = {
+  attributes: PropTypes.object,
+  value: PropTypes.string,
+  keyToDisplay: PropTypes.string,
+};
+
+export default MathTemplated;

package/src/components/respArea/__tests__/MathTemplated.test.jsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MathTemplated from '../MathTemplated';
+
+// Mock the dependencies
+jest.mock('@tiptap/react', () => ({
+  NodeViewWrapper: ({ children, ...props }) => (
+    <div data-testid="node-view-wrapper" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('@pie-lib/math-input', () => ({
+  mq: {
+    Static: ({ latex }) => (
+      <div data-testid="mq-static" data-latex={latex}>
+        {latex}
+      </div>
+    ),
+  },
+}));
+
+describe('MathTemplated', () => {
+  const defaultProps = {
+    node: {
+      attrs: {
+        value: 'x^2 + y^2 = r^2',
+        index: 0,
+      },
+    },
+    options: {},
+    selected: false,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<MathTemplated {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders NodeViewWrapper with correct className', () => {
+    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveClass('math-templated');
+  });
+
+  it('displays correct response key for index 0', () => {
+    const { getByText } = render(<MathTemplated {...defaultProps} />);
+    expect(getByText('R 1')).toBeInTheDocument();
+  });
+
+  it('displays correct response key for index 1', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: 'a + b',
+          index: 1,
+        },
+      },
+    };
+    const { getByText } = render(<MathTemplated {...props} />);
+    expect(getByText('R 2')).toBeInTheDocument();
+  });
+
+  it('displays correct response key for index 5', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: 'c = d',
+          index: 5,
+        },
+      },
+    };
+    const { getByText } = render(<MathTemplated {...props} />);
+    expect(getByText('R 6')).toBeInTheDocument();
+  });
+
+  it('renders LaTeX value correctly', () => {
+    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
+    const mqStatic = getByTestId('mq-static');
+    expect(mqStatic).toHaveAttribute('data-latex', 'x^2 + y^2 = r^2');
+  });
+
+  it('renders different LaTeX value', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: '\\frac{a}{b}',
+          index: 2,
+        },
+      },
+    };
+    const { getByTestId } = render(<MathTemplated {...props} />);
+    const mqStatic = getByTestId('mq-static');
+    expect(mqStatic).toHaveAttribute('data-latex', '\\frac{a}{b}');
+  });
+
+  it('passes selected prop to NodeViewWrapper', () => {
+    const props = {
+      ...defaultProps,
+      selected: true,
+    };
+    const { getByTestId } = render(<MathTemplated {...props} />);
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveAttribute('data-selected', 'true');
+  });
+
+  it('passes false selected prop to NodeViewWrapper', () => {
+    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveAttribute('data-selected', 'false');
+  });
+
+  it('applies correct inline styles to NodeViewWrapper', () => {
+    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveStyle({
+      display: 'inline-flex',
+      minHeight: '36px',
+      minWidth: '50px',
+      cursor: 'pointer',
+    });
+  });
+
+  it('handles string index correctly', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: 'test',
+          index: '3',
+        },
+      },
+    };
+    const { getByText } = render(<MathTemplated {...props} />);
+    expect(getByText('R 4')).toBeInTheDocument();
+  });
+
+  it('handles empty value', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: '',
+          index: 0,
+        },
+      },
+    };
+    const { getByTestId } = render(<MathTemplated {...props} />);
+    const mqStatic = getByTestId('mq-static');
+    expect(mqStatic).toHaveAttribute('data-latex', '');
+  });
+
+  it('renders all styled components', () => {
+    const { container, getByText } = render(<MathTemplated {...defaultProps} />);
+
+    // Check for response box
+    expect(getByText('R 1')).toBeInTheDocument();
+
+    // Check for math block with LaTeX
+    const mqStatic = container.querySelector('[data-testid="mq-static"]');
+    expect(mqStatic).toBeInTheDocument();
+  });
+
+  it('handles zero index', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: 'x = 0',
+          index: 0,
+        },
+      },
+    };
+    const { getByText } = render(<MathTemplated {...props} />);
+    expect(getByText('R 1')).toBeInTheDocument();
+  });
+
+  it('handles large index values', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: 'x = 100',
+          index: 99,
+        },
+      },
+    };
+    const { getByText } = render(<MathTemplated {...props} />);
+    expect(getByText('R 100')).toBeInTheDocument();
+  });
+
+  it('renders with complex LaTeX expression', () => {
+    const props = {
+      ...defaultProps,
+      node: {
+        attrs: {
+          value: '\\sqrt{x^2 + y^2}',
+          index: 0,
+        },
+      },
+    };
+    const { getByTestId } = render(<MathTemplated {...props} />);
+    const mqStatic = getByTestId('mq-static');
+    expect(mqStatic).toHaveAttribute('data-latex', '\\sqrt{x^2 + y^2}');
+  });
+});

package/src/extensions/__tests__/media-node-view.test.jsx

@@ -0,0 +1,296 @@
+// Create a mockable insertDialog function
+const mockInsertDialog = jest.fn();
+
+// Mock react-dom BEFORE any imports that depend on it
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  render: jest.fn(),
+}));
+
+// Mock the insertDialog function in the media module
+jest.mock('../media', () => {
+  const actual = jest.requireActual('../media');
+  return {
+    __esModule: true,
+    ...actual,
+    default: actual.default, // Preserve the default export
+    insertDialog: (...args) => mockInsertDialog(...args),
+  };
+});
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import MediaNodeView from '../media';
+
+jest.mock('@tiptap/core', () => ({
+  Node: { create: jest.fn((config) => config) },
+  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
+}));
+
+jest.mock('@tiptap/react', () => ({
+  NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
+  ReactNodeViewRenderer: jest.fn((component) => component),
+}));
+
+jest.mock('../../components/media/MediaDialog', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="media-dialog" />),
+}));
+
+jest.mock('../../components/media/MediaToolbar', () => ({
+  __esModule: true,
+  default: jest.fn(({ onEdit, onRemove }) => (
+    <div data-testid="media-toolbar">
+      <button onClick={onEdit} data-testid="edit-button">
+        Edit Settings
+      </button>
+      <button onClick={onRemove} data-testid="remove-button">
+        Remove
+      </button>
+    </div>
+  )),
+}));
+
+describe('MediaNodeView Component', () => {
+  let mockEditor;
+  let mockUpdateAttributes;
+  let mockDeleteNode;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockInsertDialog.mockClear();
+
+    // Clean up any existing dialogs in the DOM
+    document.body.innerHTML = '';
+
+    mockEditor = {
+      chain: jest.fn(() => ({
+        focus: jest.fn(() => ({
+          run: jest.fn(),
+        })),
+      })),
+    };
+
+    mockUpdateAttributes = jest.fn();
+    mockDeleteNode = jest.fn();
+  });
+
+  afterEach(() => {
+    // Clean up DOM after each test
+    document.body.innerHTML = '';
+  });
+
+  describe('dialog auto-opening behavior - verifies the fix', () => {
+    it('should NOT open dialog on mount when audio has existing src', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: 'https://example.com/audio.mp3',
+          width: null,
+          height: null,
+        },
+      };
+
+      // This should render without opening any dialogs
+      const { container } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      // Verify the component rendered successfully
+      expect(container.querySelector('audio')).toBeTruthy();
+      // Verify mockInsertDialog was not called (dialog didn't open)
+      expect(mockInsertDialog).not.toHaveBeenCalled();
+      // Verify deleteNode was not called (media was not removed)
+      expect(mockDeleteNode).not.toHaveBeenCalled();
+    });
+
+    it('should NOT open dialog on mount when video has existing src', () => {
+      const node = {
+        attrs: {
+          type: 'video',
+          tag: 'iframe',
+          src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+          width: '640',
+          height: '480',
+        },
+      };
+
+      // This should render without opening any dialogs
+      const { container } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      // Verify the component rendered successfully
+      expect(container.querySelector('iframe')).toBeTruthy();
+      // Verify mockInsertDialog was not called (dialog didn't open)
+      expect(mockInsertDialog).not.toHaveBeenCalled();
+      // Verify deleteNode was not called (media was not removed)
+      expect(mockDeleteNode).not.toHaveBeenCalled();
+    });
+
+    it('should render existing media with empty string src without opening dialog', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: '', // Empty string (falsy but not null)
+          width: null,
+          height: null,
+        },
+      };
+
+      const { container } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      // Empty string is falsy, so dialog WOULD open with current implementation
+      // This documents current behavior
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('toolbar interaction', () => {
+    it('should render edit and remove buttons', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: 'https://example.com/audio.mp3',
+        },
+      };
+
+      const { getByTestId } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      expect(getByTestId('edit-button')).toBeTruthy();
+      expect(getByTestId('remove-button')).toBeTruthy();
+    });
+  });
+
+  describe('rendering', () => {
+    it('should render audio element when tag is audio', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: 'https://example.com/audio.mp3',
+        },
+      };
+
+      const { container } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      const audio = container.querySelector('audio');
+      expect(audio).toBeTruthy();
+      const source = audio.querySelector('source');
+      expect(source.getAttribute('src')).toBe('https://example.com/audio.mp3');
+    });
+
+    it('should render iframe when tag is iframe', () => {
+      const node = {
+        attrs: {
+          type: 'video',
+          tag: 'iframe',
+          src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+          width: '640',
+          height: '480',
+        },
+      };
+
+      const { container } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toBeTruthy();
+      expect(iframe.getAttribute('src')).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ');
+    });
+
+    it('should render MediaToolbar', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: 'https://example.com/audio.mp3',
+        },
+      };
+
+      const { getByTestId } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      expect(getByTestId('media-toolbar')).toBeTruthy();
+      expect(getByTestId('edit-button')).toBeTruthy();
+      expect(getByTestId('remove-button')).toBeTruthy();
+    });
+
+    it('should call deleteNode when remove button is clicked', () => {
+      const node = {
+        attrs: {
+          type: 'audio',
+          tag: 'audio',
+          src: 'https://example.com/audio.mp3',
+        },
+      };
+
+      const { getByTestId } = render(
+        <MediaNodeView
+          editor={mockEditor}
+          node={node}
+          updateAttributes={mockUpdateAttributes}
+          deleteNode={mockDeleteNode}
+          options={{}}
+        />
+      );
+
+      fireEvent.click(getByTestId('remove-button'));
+
+      expect(mockDeleteNode).toHaveBeenCalled();
+    });
+  });
+});

package/src/extensions/__tests__/media.test.js

@@ -268,3 +268,4 @@ describe('insertDialog', () => {
     expect(dialogs).toHaveLength(1);
   });
 });
+

package/src/extensions/image-component.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 import debug from 'debug';
 import LinearProgress from '@mui/material/LinearProgress';
 import { styled } from '@mui/material/styles';

package/src/extensions/index.js

@@ -1,4 +1,5 @@
-import { compact, isEmpty } from 'lodash-es';
+import compact from 'lodash-es/compact';
+import isEmpty from 'lodash-es/isEmpty';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins');
@@ -30,6 +31,8 @@ export const ALL_PLUGINS = [
 
 export const PLUGINS_MAP = {
   'text-align': 'textAlign',
+  'bulleted-list': 'ul_list',
+  'numbered-list': 'ol_list',
 };
 
 export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));

package/src/extensions/media.js

@@ -153,20 +153,23 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
   };
 
   useEffect(() => {
-    insertDialog({
-      ...node.attrs,
-      options: options,
-      edit: true,
-      callback: (val, data) => {
-        if (val) {
-          updateAttributes(data);
-        } else {
-          deleteNode();
-        }
-
-        editor.chain().focus().run();
-      },
-    });
+    // Only open dialog for newly inserted media without a src
+    if (!src) {
+      insertDialog({
+        ...node.attrs,
+        options: options,
+        edit: true,
+        callback: (val, data) => {
+          if (val) {
+            updateAttributes(data);
+          } else {
+            deleteNode();
+          }
+
+          editor.chain().focus().run();
+        },
+      });
+    }
   }, []);
 
   return (