@pie-lib/editable-html-tip-tap 2.2.0-beta.8 → 2.2.0-beta.9

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.2.0-beta.8",
+  "version": "2.2.0-beta.9",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -17,9 +17,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/drag": "^4.0.2",
-    "@pie-lib/math-input-mathlive": "^1.0.12",
+    "@pie-lib/math-input-mathlive": "^1.0.13",
     "@pie-lib/math-rendering": "^5.0.2",
-    "@pie-lib/math-toolbar": "^3.1.0-beta.8",
+    "@pie-lib/math-toolbar": "^3.1.0-beta.9",
     "@pie-lib/render-ui": "^6.1.0",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-character-count": "3.20.0",

package/src/__tests__/EditableHtml.test.jsx

@@ -1,588 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { useEditor } from '@tiptap/react';
-import { EditableHtml } from '../components/EditableHtml';
-import { InlineDropdownNode } from '../extensions/responseArea';
-
-// Mock TipTap dependencies
-jest.mock('@tiptap/react', () => ({
-  EditorContent: ({ editor, ...props }) => <div data-testid="editor-content" {...props} />,
-  useEditor: jest.fn((config) => {
-    const mockEditor = {
-      getHTML: jest.fn(() => '<p>test content</p>'),
-      setEditable: jest.fn(),
-      commands: {
-        setContent: jest.fn(),
-      },
-      isActive: jest.fn(() => false),
-      isFocused: false,
-    };
-    return mockEditor;
-  }),
-  useEditorState: jest.fn(() => ({
-    isFocused: false,
-  })),
-}));
-
-jest.mock('@tiptap/starter-kit', () => ({
-  __esModule: true,
-  default: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('@tiptap/extension-text-style', () => ({
-  TextStyleKit: {},
-}));
-
-jest.mock('@tiptap/extension-character-count', () => ({
-  CharacterCount: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('@tiptap/extension-superscript', () => ({
-  __esModule: true,
-  default: {},
-}));
-
-jest.mock('@tiptap/extension-subscript', () => ({
-  __esModule: true,
-  default: {},
-}));
-
-jest.mock('@tiptap/extension-text-align', () => ({
-  __esModule: true,
-  default: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('@tiptap/extension-image', () => ({
-  __esModule: true,
-  default: {},
-}));
-
-jest.mock('@tiptap/extension-table', () => ({
-  __esModule: true,
-  default: {},
-}));
-
-jest.mock('@tiptap/extension-table-row', () => ({
-  TableRow: {},
-}));
-
-jest.mock('../extensions/extended-table-cell', () => ({
-  ExtendedTableCell: {},
-  ExtendedTableHeader: {},
-}));
-
-jest.mock('../extensions/extended-table', () => ({
-  __esModule: true,
-  default: {},
-}));
-
-jest.mock('../extensions/ensure-empty-root-div', () => ({
-  EnsureEmptyRootIsDiv: {},
-}));
-
-jest.mock('../extensions/extended-list-item', () => ({
-  ExtendedListItem: {},
-}));
-
-jest.mock('../extensions/ensure-list-item-content-is-div', () => ({
-  EnsureListItemContentIsDiv: {},
-}));
-
-jest.mock('../extensions/responseArea', () => ({
-  ExplicitConstructedResponseNode: {
-    configure: jest.fn(() => ({})),
-  },
-  DragInTheBlankNode: {
-    configure: jest.fn(() => ({})),
-  },
-  InlineDropdownNode: {
-    configure: jest.fn(() => ({})),
-  },
-  MathTemplatedNode: {
-    configure: jest.fn(() => ({})),
-  },
-  ResponseAreaExtension: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('../extensions/math', () => ({
-  MathNode: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('../extensions/image', () => ({
-  ImageUploadNode: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('../extensions/media', () => ({
-  Media: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('../extensions/css', () => ({
-  CSSMark: {
-    configure: jest.fn(() => ({})),
-  },
-}));
-
-jest.mock('../components/TiptapContainer', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="editor-container">{children}</div>,
-}));
-
-jest.mock('../extensions', () => ({
-  ...jest.requireActual('../extensions'),
-  buildExtensions: jest.fn(() => []),
-}));
-
-describe('EditableHtml', () => {
-  const defaultProps = {
-    markup: '<p>Hello World</p>',
-    onChange: jest.fn(),
-    onDone: jest.fn(),
-    disabled: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<EditableHtml {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders editor container', () => {
-    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
-    expect(getByTestId('editor-container')).toBeInTheDocument();
-  });
-
-  it('renders editor content when editor is initialized', async () => {
-    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
-    await waitFor(() => {
-      expect(getByTestId('editor-content')).toBeInTheDocument();
-    });
-  });
-
-  it('accepts custom toolbar options', () => {
-    const toolbarOpts = {
-      position: 'top',
-      alignment: 'center',
-      alwaysVisible: true,
-      showDone: false,
-      doneOn: 'change',
-    };
-    const { container } = render(<EditableHtml {...defaultProps} toolbarOpts={toolbarOpts} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts custom active plugins', () => {
-    const activePlugins = ['bold', 'italic', 'underline'];
-    const { container } = render(<EditableHtml {...defaultProps} activePlugins={activePlugins} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts plugin props', () => {
-    const pluginProps = {
-      showParagraphs: { disabled: false },
-      separateParagraphs: { disabled: false },
-    };
-    const { container } = render(<EditableHtml {...defaultProps} pluginProps={pluginProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts response area props', () => {
-    const responseAreaProps = {
-      type: 'explicit-constructed-response',
-      options: {},
-    };
-    const { container } = render(<EditableHtml {...defaultProps} responseAreaProps={responseAreaProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('passes blur done behavior to inline dropdown toolbar close', async () => {
-    const onChange = jest.fn();
-    const onDone = jest.fn();
-    const html = '<p>from inline dropdown close</p>';
-
-    render(
-      <EditableHtml
-        {...defaultProps}
-        markup="<p>Hello World</p>"
-        onChange={onChange}
-        onDone={onDone}
-        toolbarOpts={{ doneOn: 'blur' }}
-        responseAreaProps={{ type: 'inline-dropdown' }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(InlineDropdownNode.configure).toHaveBeenCalled();
-    });
-
-    const configureCall = InlineDropdownNode.configure.mock.calls[InlineDropdownNode.configure.mock.calls.length - 1];
-    const inlineDropdownOptions = configureCall[0];
-    const editor = {
-      getHTML: jest.fn(() => html),
-    };
-
-    inlineDropdownOptions.onInlineDropdownToolbarClose(editor);
-
-    expect(editor.getHTML).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(html);
-    expect(onDone).toHaveBeenCalledWith(html);
-  });
-
-  it('accepts size props', () => {
-    const sizeProps = {
-      width: 500,
-      height: 300,
-      minHeight: 200,
-      maxHeight: 400,
-      minWidth: 300,
-      maxWidth: 600,
-    };
-    const { container } = render(<EditableHtml {...defaultProps} {...sizeProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts character limit', () => {
-    const { container } = render(<EditableHtml {...defaultProps} charactersLimit={500} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts image support props', () => {
-    const imageSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { container } = render(<EditableHtml {...defaultProps} imageSupport={imageSupport} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts max image dimensions', () => {
-    const { container } = render(<EditableHtml {...defaultProps} maxImageWidth={800} maxImageHeight={600} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts language characters props', () => {
-    const languageCharactersProps = [
-      { label: 'Greek', value: 'greek' },
-      { label: 'Cyrillic', value: 'cyrillic' },
-    ];
-    const { container } = render(<EditableHtml {...defaultProps} languageCharactersProps={languageCharactersProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts extra CSS rules', () => {
-    const extraCSSRules = {
-      '.custom-class': { color: 'red' },
-    };
-    const { container } = render(<EditableHtml {...defaultProps} extraCSSRules={extraCSSRules} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts upload sound support', () => {
-    const uploadSoundSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { container } = render(<EditableHtml {...defaultProps} uploadSoundSupport={uploadSoundSupport} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts onKeyDown handler', () => {
-    const onKeyDown = jest.fn();
-    const { container } = render(<EditableHtml {...defaultProps} onKeyDown={onKeyDown} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts disableImageAlignmentButtons prop', () => {
-    const { container } = render(<EditableHtml {...defaultProps} disableImageAlignmentButtons={true} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calls editorRef callback when editor is initialized', async () => {
-    const editorRef = jest.fn();
-    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
-
-    await waitFor(() => {
-      expect(editorRef).toHaveBeenCalled();
-    });
-  });
-
-  it('calls editorRef with the editor instance', async () => {
-    const editorRef = jest.fn();
-    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
-
-    await waitFor(() => {
-      expect(editorRef).toHaveBeenCalled();
-      // Verify it was called with an object that has editor-like properties
-      const callArg = editorRef.mock.calls[0][0];
-      expect(callArg).toHaveProperty('getHTML');
-      expect(callArg).toHaveProperty('commands');
-    });
-  });
-
-  it('handles editorRef being undefined', () => {
-    const { container } = render(<EditableHtml {...defaultProps} editorRef={undefined} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('applies flex display to StyledEditorContent', async () => {
-    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
-    await waitFor(() => {
-      const editorContent = getByTestId('editor-content');
-      expect(editorContent).toBeInTheDocument();
-    });
-  });
-
-  it('does not run blur onChange/onDone while an image insert flow is active', async () => {
-    jest.useFakeTimers();
-    const onChange = jest.fn();
-    const onDone = jest.fn();
-
-    render(
-      <EditableHtml
-        {...defaultProps}
-        markup="<p>Hello World</p>"
-        onChange={onChange}
-        onDone={onDone}
-        toolbarOpts={{ ...defaultProps.toolbarOpts, doneOn: 'blur' }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(useEditor).toHaveBeenCalled();
-    });
-
-    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-    const blurEditor = {
-      getHTML: jest.fn(() => '<p>changed</p>'),
-      schema: {},
-      _insertingImage: true,
-      _toolbarOpened: false,
-      isActive: jest.fn(() => false),
-    };
-
-    editorConfig.onBlur({ editor: blurEditor });
-    jest.advanceTimersByTime(200);
-
-    expect(onChange).not.toHaveBeenCalled();
-    expect(onDone).not.toHaveBeenCalled();
-
-    jest.useRealTimers();
-  });
-
-  it('does not run blur onChange/onDone when editor has no schema', async () => {
-    jest.useFakeTimers();
-    const onChange = jest.fn();
-    const onDone = jest.fn();
-
-    render(
-      <EditableHtml
-        {...defaultProps}
-        markup="<p>Hello World</p>"
-        onChange={onChange}
-        onDone={onDone}
-        toolbarOpts={{ doneOn: 'blur' }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(useEditor).toHaveBeenCalled();
-    });
-
-    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-    const getHTML = jest.fn(() => '<p>changed</p>');
-    const blurEditor = {
-      getHTML,
-      schema: undefined,
-      _insertingImage: false,
-      _toolbarOpened: false,
-      isActive: jest.fn(() => false),
-    };
-
-    editorConfig.onBlur({ editor: blurEditor });
-    jest.advanceTimersByTime(200);
-
-    expect(getHTML).not.toHaveBeenCalled();
-    expect(onChange).not.toHaveBeenCalled();
-    expect(onDone).not.toHaveBeenCalled();
-
-    jest.useRealTimers();
-  });
-
-  it('calls getHTML once on blur and passes the same html to onChange and onDone', async () => {
-    jest.useFakeTimers();
-    const onChange = jest.fn();
-    const onDone = jest.fn();
-    const html = '<p>from editor</p>';
-
-    render(
-      <EditableHtml
-        {...defaultProps}
-        markup="<p>Hello World</p>"
-        onChange={onChange}
-        onDone={onDone}
-        toolbarOpts={{ doneOn: 'blur' }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(useEditor).toHaveBeenCalled();
-    });
-
-    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-    const getHTML = jest.fn(() => html);
-    const blurEditor = {
-      getHTML,
-      schema: {},
-      _insertingImage: false,
-      _toolbarOpened: false,
-      isActive: jest.fn(() => false),
-    };
-
-    editorConfig.onBlur({ editor: blurEditor });
-    jest.advanceTimersByTime(200);
-
-    expect(getHTML).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(html);
-    expect(onDone).toHaveBeenCalledWith(html);
-
-    jest.useRealTimers();
-  });
-
-  describe('onUpdate callback', () => {
-    it('calls onChange when transaction.isDone is true', async () => {
-      const onChange = jest.fn();
-      const markup = '<p>Initial content</p>';
-
-      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-      const mockEditor = {
-        getHTML: jest.fn(() => '<p>Updated content</p>'),
-      };
-
-      const mockTransaction = {
-        isDone: true,
-      };
-
-      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
-
-      expect(onChange).toHaveBeenCalledWith('<p>Updated content</p>');
-    });
-
-    it('does not call onChange when transaction.isDone is false even if markup differs from editor HTML', async () => {
-      const onChange = jest.fn();
-      const markup = '<p>Initial content</p>';
-
-      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-      const mockEditor = {
-        getHTML: jest.fn(() => '<p>Different content</p>'),
-      };
-
-      const mockTransaction = {
-        isDone: false,
-      };
-
-      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
-
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('does not call onChange when transaction.isDone is false and markup matches editor HTML', async () => {
-      const onChange = jest.fn();
-      const markup = '<p>Same content</p>';
-
-      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-      const mockEditor = {
-        getHTML: jest.fn(() => '<p>Same content</p>'),
-      };
-
-      const mockTransaction = {
-        isDone: false,
-      };
-
-      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
-
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('calls onChange when transaction.isDone is true even if markup matches', async () => {
-      const onChange = jest.fn();
-      const markup = '<p>Same content</p>';
-
-      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-      const mockEditor = {
-        getHTML: jest.fn(() => '<p>Same content</p>'),
-      };
-
-      const mockTransaction = {
-        isDone: true,
-      };
-
-      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
-
-      expect(onChange).toHaveBeenCalledWith('<p>Same content</p>');
-    });
-
-    it('does not call onChange when onChange is not provided', async () => {
-      const markup = '<p>Content</p>';
-
-      render(<EditableHtml {...defaultProps} markup={markup} onChange={undefined} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-      const mockEditor = {
-        getHTML: jest.fn(() => '<p>Updated content</p>'),
-      };
-
-      const mockTransaction = {
-        isDone: true,
-      };
-
-      // Should not throw error when onChange is undefined
-      expect(() => {
-        editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
-      }).not.toThrow();
-    });
-  });
-});

package/src/__tests__/constants.test.js

@@ -1,19 +0,0 @@
-import constants, { PIE_TOOLBAR__CLASS } from '../constants';
-
-describe('Constants', () => {
-  describe('PIE_TOOLBAR__CLASS', () => {
-    it('is defined', () => {
-      expect(PIE_TOOLBAR__CLASS).toBeDefined();
-    });
-
-    it('has the correct value', () => {
-      expect(PIE_TOOLBAR__CLASS).toBe('pie-toolbar');
-    });
-  });
-
-  describe('default export', () => {
-    it('contains PIE_TOOLBAR__CLASS', () => {
-      expect(constants.PIE_TOOLBAR__CLASS).toBe('pie-toolbar');
-    });
-  });
-});