@pie-lib/editable-html-tip-tap 2.1.2-next.29 → 2.1.2-next.30

package/src/__tests__/extensions.test.js

@@ -1,208 +0,0 @@
-import { ALL_PLUGINS, buildExtensions, DEFAULT_PLUGINS } from '../extensions';
-
-describe('Extensions', () => {
-  describe('ALL_PLUGINS', () => {
-    it('contains all expected plugins', () => {
-      expect(ALL_PLUGINS).toContain('bold');
-      expect(ALL_PLUGINS).toContain('italic');
-      expect(ALL_PLUGINS).toContain('underline');
-      expect(ALL_PLUGINS).toContain('strikethrough');
-      expect(ALL_PLUGINS).toContain('bulleted-list');
-      expect(ALL_PLUGINS).toContain('numbered-list');
-      expect(ALL_PLUGINS).toContain('image');
-      expect(ALL_PLUGINS).toContain('math');
-      expect(ALL_PLUGINS).toContain('languageCharacters');
-      expect(ALL_PLUGINS).toContain('text-align');
-      expect(ALL_PLUGINS).toContain('table');
-      expect(ALL_PLUGINS).toContain('video');
-      expect(ALL_PLUGINS).toContain('audio');
-      expect(ALL_PLUGINS).toContain('responseArea');
-      expect(ALL_PLUGINS).toContain('superscript');
-      expect(ALL_PLUGINS).toContain('subscript');
-      expect(ALL_PLUGINS).toContain('h3');
-      expect(ALL_PLUGINS).toContain('blockquote');
-      expect(ALL_PLUGINS).toContain('undo');
-      expect(ALL_PLUGINS).toContain('redo');
-    });
-  });
-
-  describe('DEFAULT_PLUGINS', () => {
-    it('excludes responseArea, h3, and blockquote', () => {
-      expect(DEFAULT_PLUGINS).not.toContain('responseArea');
-      expect(DEFAULT_PLUGINS).not.toContain('h3');
-      expect(DEFAULT_PLUGINS).not.toContain('blockquote');
-    });
-
-    it('contains basic formatting plugins', () => {
-      expect(DEFAULT_PLUGINS).toContain('bold');
-      expect(DEFAULT_PLUGINS).toContain('italic');
-      expect(DEFAULT_PLUGINS).toContain('underline');
-    });
-  });
-
-  describe('buildExtensions', () => {
-    it('returns an array when called with default parameters', () => {
-      const result = buildExtensions(DEFAULT_PLUGINS, [], {});
-      expect(Array.isArray(result)).toBe(true);
-    });
-
-    it('includes only active extensions', () => {
-      const activeExtensions = ['bold', 'italic'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toEqual(['bold', 'italic']);
-    });
-
-    it('filters out undefined values', () => {
-      const result = buildExtensions(['bold', 'italic'], [], {});
-      expect(result.every((item) => item !== undefined)).toBe(true);
-    });
-
-    it('excludes image plugin when opts.image.onDelete is not provided', () => {
-      const activeExtensions = ['image'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('image');
-    });
-
-    it('includes image plugin when opts.image.delete is provided', () => {
-      const activeExtensions = ['image'];
-      const opts = { image: { delete: jest.fn() } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('image');
-    });
-
-    it('excludes math plugin when opts.math is not provided', () => {
-      const activeExtensions = ['math'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('math');
-    });
-
-    it('includes math plugin when opts.math is provided', () => {
-      const activeExtensions = ['math'];
-      const opts = { math: {} };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('math');
-    });
-
-    it('excludes responseArea plugin when opts.responseArea.type is not provided', () => {
-      const activeExtensions = ['responseArea'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('responseArea');
-    });
-
-    it('includes responseArea plugin when opts.responseArea.type is provided', () => {
-      const activeExtensions = ['responseArea'];
-      const opts = { responseArea: { type: 'explicit-constructed-response' } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('responseArea');
-    });
-
-    it('excludes css plugin when opts.extraCSSRules is empty', () => {
-      const activeExtensions = ['css'];
-      const result = buildExtensions(activeExtensions, [], { extraCSSRules: {} });
-      expect(result).not.toContain('css');
-    });
-
-    it('includes css plugin when opts.extraCSSRules has values', () => {
-      const activeExtensions = ['css'];
-      const opts = { extraCSSRules: { color: 'red' } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('css');
-    });
-
-    it('excludes html plugin when opts.html is not provided', () => {
-      const activeExtensions = ['html'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('html');
-    });
-
-    it('includes html plugin when opts.html is provided', () => {
-      const activeExtensions = ['html'];
-      const opts = { html: true };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('html');
-    });
-
-    it('handles languageCharacters plugins array', () => {
-      const activeExtensions = ['languageCharacters'];
-      const opts = {
-        languageCharacters: [
-          { label: 'Greek', value: 'greek' },
-          { label: 'Cyrillic', value: 'cyrillic' },
-        ],
-      };
-      const result = buildExtensions(activeExtensions, [], opts);
-      // Should include languageCharacters for each item in the array
-      const languageCharsCount = result.filter((item) => item === 'languageCharacters').length;
-      expect(languageCharsCount).toBe(2);
-    });
-
-    it('uses DEFAULT_PLUGINS when activeExtensions is not provided', () => {
-      const result = buildExtensions(null, [], {});
-      expect(Array.isArray(result)).toBe(true);
-      expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('includes list plugins', () => {
-      const activeExtensions = ['bulleted-list', 'numbered-list'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('bulleted-list');
-      expect(result).toContain('numbered-list');
-    });
-
-    it('includes undo and redo plugins', () => {
-      const activeExtensions = ['undo', 'redo'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('undo');
-      expect(result).toContain('redo');
-    });
-
-    it('includes text formatting plugins', () => {
-      const activeExtensions = ['superscript', 'subscript', 'strikethrough', 'underline'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('superscript');
-      expect(result).toContain('subscript');
-      expect(result).toContain('strikethrough');
-      expect(result).toContain('underline');
-    });
-
-    it('includes media plugins', () => {
-      const activeExtensions = ['video', 'audio'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('video');
-      expect(result).toContain('audio');
-    });
-
-    it('includes table plugin', () => {
-      const activeExtensions = ['table'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('table');
-    });
-
-    it('includes text-align plugin', () => {
-      const activeExtensions = ['text-align'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('text-align');
-    });
-
-    it('includes blockquote and h3 plugins when in active list', () => {
-      const activeExtensions = ['blockquote', 'h3'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('blockquote');
-      expect(result).toContain('h3');
-    });
-
-    it('filters out inactive extensions', () => {
-      const activeExtensions = ['bold'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('italic');
-      expect(result).not.toContain('underline');
-    });
-
-    it('maintains order of extensions', () => {
-      const activeExtensions = ['table', 'bold', 'italic'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result.indexOf('table')).toBeLessThan(result.indexOf('bold'));
-      expect(result.indexOf('bold')).toBeLessThan(result.indexOf('italic'));
-    });
-  });
-});

package/src/__tests__/index.test.jsx

@@ -1,154 +0,0 @@
-import StyledEditor, { ALL_PLUGINS, DEFAULT_PLUGINS, EditableHtml } from '../index';
-
-// Mock TipTap and dependencies
-jest.mock('@tiptap/react', () => ({
-  EditorContent: () => <div data-testid="editor-content" />,
-  useEditor: jest.fn(() => ({
-    getHTML: jest.fn(() => '<p>test content</p>'),
-    setEditable: jest.fn(),
-    commands: { setContent: jest.fn() },
-    isActive: jest.fn(() => false),
-    isFocused: false,
-  })),
-  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(() => ({})) },
-  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', () => ({
-  buildExtensions: jest.fn(() => []),
-  ALL_PLUGINS: [
-    'bold',
-    'html',
-    'extraCSSRules',
-    'italic',
-    'underline',
-    'strikethrough',
-    'bulleted-list',
-    'numbered-list',
-    'image',
-    'math',
-    'languageCharacters',
-    'text-align',
-    'blockquote',
-    'h3',
-    'table',
-    'video',
-    'audio',
-    'responseArea',
-    'redo',
-    'undo',
-    'superscript',
-    'subscript',
-  ],
-  DEFAULT_PLUGINS: [
-    'bold',
-    'html',
-    'extraCSSRules',
-    'italic',
-    'underline',
-    'strikethrough',
-    'bulleted-list',
-    'numbered-list',
-    'image',
-    'math',
-    'languageCharacters',
-    'text-align',
-    'table',
-    'video',
-    'audio',
-    'redo',
-    'undo',
-    'superscript',
-    'subscript',
-  ],
-}));
-
-describe('editable-html-tip-tap module', () => {
-  describe('exports', () => {
-    it('exports StyledEditor as default', () => {
-      expect(StyledEditor).toBeDefined();
-    });
-
-    it('exports EditableHtml as named export', () => {
-      expect(EditableHtml).toBeDefined();
-    });
-
-    it('exports ALL_PLUGINS as named export', () => {
-      expect(ALL_PLUGINS).toBeDefined();
-      expect(Array.isArray(ALL_PLUGINS)).toBe(true);
-    });
-
-    it('exports DEFAULT_PLUGINS as named export', () => {
-      expect(DEFAULT_PLUGINS).toBeDefined();
-      expect(Array.isArray(DEFAULT_PLUGINS)).toBe(true);
-    });
-
-    it('StyledEditor and EditableHtml refer to the same component', () => {
-      expect(StyledEditor).toBe(EditableHtml);
-    });
-  });
-
-  describe('ALL_PLUGINS', () => {
-    it('contains expected plugins', () => {
-      expect(ALL_PLUGINS).toContain('bold');
-      expect(ALL_PLUGINS).toContain('italic');
-      expect(ALL_PLUGINS).toContain('underline');
-      expect(ALL_PLUGINS).toContain('math');
-      expect(ALL_PLUGINS).toContain('table');
-      expect(ALL_PLUGINS).toContain('responseArea');
-    });
-  });
-
-  describe('DEFAULT_PLUGINS', () => {
-    it('is a subset of ALL_PLUGINS', () => {
-      const allPluginsSet = new Set(ALL_PLUGINS);
-      DEFAULT_PLUGINS.forEach((plugin) => {
-        expect(allPluginsSet.has(plugin)).toBe(true);
-      });
-    });
-
-    it('contains basic formatting plugins', () => {
-      expect(DEFAULT_PLUGINS).toContain('bold');
-      expect(DEFAULT_PLUGINS).toContain('italic');
-      expect(DEFAULT_PLUGINS).toContain('underline');
-    });
-  });
-});

package/src/__tests__/size-utils.test.js

@@ -1,64 +0,0 @@
-import { valueToSize } from '../utils/size';
-
-describe('Size Utilities', () => {
-  describe('valueToSize', () => {
-    it('returns undefined for falsy values', () => {
-      expect(valueToSize(null)).toBeUndefined();
-      expect(valueToSize(undefined)).toBeUndefined();
-      expect(valueToSize('')).toBeUndefined();
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('converts number to px string', () => {
-      expect(valueToSize(100)).toBe('100px');
-      expect(valueToSize(50)).toBe('50px');
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('returns undefined for percentage strings', () => {
-      expect(valueToSize('100%')).toBeUndefined();
-      expect(valueToSize('50%')).toBeUndefined();
-      expect(valueToSize('0%')).toBeUndefined();
-    });
-
-    it('preserves valid CSS unit strings', () => {
-      expect(valueToSize('100px')).toBe('100px');
-      expect(valueToSize('10vh')).toBe('10vh');
-      expect(valueToSize('50vw')).toBe('50vw');
-      expect(valueToSize('9ch')).toBe('9ch');
-      expect(valueToSize('2em')).toBe('2em');
-    });
-
-    it('preserves calc() expressions', () => {
-      expect(valueToSize('calc(10em + 42px)')).toBe('calc(10em + 42px)');
-      expect(valueToSize('calc(100% - 20px)')).toBe('calc(100% - 20px)');
-      expect(valueToSize('calc(50vh + 10px)')).toBe('calc(50vh + 10px)');
-    });
-
-    it('converts numeric strings to px', () => {
-      expect(valueToSize('100')).toBe('100px');
-      expect(valueToSize('50')).toBe('50px');
-      expect(valueToSize('250')).toBe('250px');
-    });
-
-    it('handles invalid numeric strings', () => {
-      const result = valueToSize('invalid');
-      expect(isNaN(result)).toBe(true);
-    });
-
-    it('handles edge cases with whitespace', () => {
-      const result = valueToSize('  ');
-      expect(isNaN(result)).toBe(true);
-    });
-
-    it('handles negative numbers', () => {
-      expect(valueToSize(-100)).toBe('-100px');
-      expect(valueToSize('-50')).toBe('-50px');
-    });
-
-    it('handles decimal numbers', () => {
-      expect(valueToSize(100.5)).toBe('100.5px');
-      expect(valueToSize('100.5')).toBe('100px'); // parseInt truncates
-    });
-  });
-});

package/src/__tests__/theme.test.js

@@ -1,17 +0,0 @@
-import { primary } from '../theme';
-
-describe('Theme', () => {
-  describe('primary color', () => {
-    it('is defined', () => {
-      expect(primary).toBeDefined();
-    });
-
-    it('has the correct hex value', () => {
-      expect(primary).toBe('#304ffe');
-    });
-
-    it('is a valid hex color', () => {
-      expect(primary).toMatch(/^#[0-9A-Fa-f]{6}$/);
-    });
-  });
-});

package/src/components/CharacterPicker.jsx

@@ -1,207 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import get from 'lodash-es/get';
-
-import { PureToolbar } from '@pie-lib/math-toolbar';
-
-import CustomPopper from './characters/custom-popper';
-import { spanishConfig, specialConfig } from './characters/characterUtils';
-
-const CharacterIcon = ({ letter }) => (
-  <div
-    style={{
-      fontSize: '24px',
-      lineHeight: '24px',
-    }}
-  >
-    {letter}
-  </div>
-);
-
-CharacterIcon.propTypes = {
-  letter: PropTypes.string,
-};
-
-export function CharacterPicker({ editor, opts, onClose }) {
-  if (!opts?.characters?.length) {
-    return null;
-  }
-
-  const containerRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const [popover, setPopover] = useState(null);
-
-  onCloseRef.current = onClose;
-
-  const configToUse = useMemo(() => {
-    if (!opts) return spanishConfig;
-
-    switch (true) {
-      case opts.language === 'spanish':
-        return spanishConfig;
-      case opts.language === 'special':
-        return specialConfig;
-      default:
-        return opts;
-    }
-  }, [opts]);
-
-  const layoutForCharacters = useMemo(
-    () =>
-      configToUse.characters.reduce(
-        (obj, arr) => {
-          if (arr.length >= obj.columns) {
-            obj.columns = arr.length;
-          }
-
-          return obj;
-        },
-        { rows: configToUse.characters.length, columns: 0 },
-      ),
-    [configToUse],
-  );
-
-  const closePopOver = () => setPopover(null);
-
-  useEffect(
-    () => () => {
-      closePopOver();
-    },
-    [],
-  );
-
-  // Keep `onClose` out of the dependency array — parents often pass a new callback each
-  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a
-  // ref so click-outside always calls the latest close handler.
-  useEffect(() => {
-    if (!editor) return;
-
-    // Calculate position relative to selection
-    const editorDOM = editor.options.element;
-    const editorRect = editorDOM.getBoundingClientRect();
-    const bodyRect = document.body.getBoundingClientRect();
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
-
-    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
-
-    if (editorRect.y > containerRef.current.offsetHeight) {
-      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
-    }
-
-    setPosition({
-      top: top,
-      left: start.left,
-    });
-
-    const editorViewDom = editor.view.dom;
-
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
-        onCloseRef.current();
-      }
-    };
-
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('click', handleClickOutside);
-    });
-
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [editor]);
-
-  const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });
-
-  const handleChange = (val) => {
-    if (typeof val === 'string') {
-      editor.chain().focus().insertContent(val).run();
-    }
-  };
-
-  return (
-    <>
-      {ReactDOM.createPortal(
-        <div
-          ref={containerRef}
-          className="insert-character-dialog"
-          data-toolbar-for={editor.instanceId}
-          style={{
-            visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
-            position: 'absolute',
-            top: `${position.top}px`,
-            left: `${position.left}px`,
-            maxWidth: '500px',
-            zIndex: 99,
-          }}
-        >
-          <div>
-            <PureToolbar
-              keyPadCharacterRef={opts.keyPadCharacterRef}
-              setKeypadInteraction={opts.setKeypadInteraction}
-              autoFocus
-              noDecimal
-              hideInput
-              noLatexHandling
-              hideDoneButtonBackground
-              layoutForKeyPad={layoutForCharacters}
-              additionalKeys={configToUse.characters.reduce((arr, n) => {
-                arr = [
-                  ...arr,
-                  ...n.map((k) => ({
-                    name: get(k, 'name') || k,
-                    write: get(k, 'write') || k,
-                    label: get(k, 'label') || k,
-                    category: 'character',
-                    extraClass: 'character',
-                    extraProps: {
-                      ...(k.extraProps || {}),
-                      style: {
-                        ...(k.extraProps || {}).style,
-                        border: '1px solid #000',
-                      },
-                    },
-                    ...(configToUse.hasPreview
-                      ? {
-                          actions: {
-                            onMouseEnter: (ev) => renderPopOver(ev, k),
-                            onMouseLeave: closePopOver,
-                          },
-                        }
-                      : {}),
-                  })),
-                ];
-
-                return arr;
-              }, [])}
-              keypadMode="language"
-              onChange={handleChange}
-              onDone={onClose}
-            />
-          </div>
-        </div>,
-        document.body,
-      )}
-      {popover &&
-        ReactDOM.createPortal(
-          <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>
-            <div>{popover.el.label}</div>
-            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>
-            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>
-          </CustomPopper>,
-          document.body,
-        )}
-    </>
-  );
-}
-
-CharacterPicker.propTypes = {
-  editor: PropTypes.object,
-  opts: PropTypes.object,
-  onClose: PropTypes.func.isRequired,
-};
-
-export { CharacterIcon };