@pie-lib/editable-html-tip-tap 2.1.19 → 2.1.20-beta.2

package/src/__tests__/EditableHtml.test.jsx

@@ -1,668 +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(),
-      setOptions: 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();
-    });
-  });
-
-  describe('spellCheck', () => {
-    const lastEditorAttributes = () => {
-      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
-
-      return editorConfig.editorProps.attributes;
-    };
-
-    it('disables browser spellcheck on the contenteditable when spellCheck is false', async () => {
-      render(<EditableHtml {...defaultProps} spellCheck={false} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes()).toEqual({
-        role: 'textbox',
-        'data-pie-editor': 'true',
-        spellcheck: 'false',
-        autocorrect: 'off',
-        autocapitalize: 'off',
-      });
-    });
-
-    it('enables browser spellcheck when spellCheck is true', async () => {
-      render(<EditableHtml {...defaultProps} spellCheck={true} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes()).toEqual({
-        role: 'textbox',
-        'data-pie-editor': 'true',
-        spellcheck: 'true',
-        autocorrect: 'on',
-        autocapitalize: 'on',
-      });
-    });
-
-    it('keeps the browser default when spellCheck is not provided', async () => {
-      render(<EditableHtml {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(useEditor).toHaveBeenCalled();
-      });
-
-      expect(lastEditorAttributes().spellcheck).toEqual('true');
-    });
-
-    it('pushes spellCheck changes onto an existing editor', async () => {
-      const editorRef = jest.fn();
-      const { rerender } = render(<EditableHtml {...defaultProps} spellCheck={true} editorRef={editorRef} />);
-
-      await waitFor(() => {
-        expect(editorRef).toHaveBeenCalled();
-      });
-
-      rerender(<EditableHtml {...defaultProps} spellCheck={false} editorRef={editorRef} />);
-
-      await waitFor(() => {
-        expect(lastEditorAttributes().spellcheck).toEqual('false');
-      });
-
-      const editor = editorRef.mock.calls[editorRef.mock.calls.length - 1][0];
-
-      expect(editor.setOptions).toHaveBeenCalledWith({
-        editorProps: expect.objectContaining({
-          attributes: {
-            role: 'textbox',
-            'data-pie-editor': 'true',
-            spellcheck: 'false',
-            autocorrect: 'off',
-            autocapitalize: 'off',
-          },
-        }),
-      });
-    });
-  });
-});

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');
-    });
-  });
-});