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

package/src/__tests__/extensions.test.js

@@ -0,0 +1,208 @@
+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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,207 @@
+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 };