@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/src/components/CharacterPicker.jsx

@@ -1,237 +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;
-
-    const editorDOM = editor.options.element;
-    const editorViewDom = editor.view.dom;
-
-    // Position is computed in viewport coordinates (the dialog uses position: fixed),
-    // so coordsAtPos / getBoundingClientRect values can be used directly without
-    // adding scroll offsets. The dialog is then clamped to the viewport so it does
-    // not get cut off by fixed page headers/footers.
-    const updatePosition = () => {
-      if (!containerRef.current) return;
-
-      const editorRect = editorDOM.getBoundingClientRect();
-      const { from } = editor.state.selection;
-      const start = editor.view.coordsAtPos(from);
-
-      const dialogHeight = containerRef.current.offsetHeight;
-      const dialogWidth = containerRef.current.offsetWidth;
-
-      // prefer below the editor; flip above when there isn't room below.
-      const spaceBelow = window.innerHeight - (editorRect.bottom + 60);
-      let top =
-        spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80
-          ? editorRect.bottom + 60
-          : editorRect.top - dialogHeight - 20;
-
-      let left = start.left;
-
-      const margin = 8;
-      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
-      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
-
-      setPosition({ top, left });
-    };
-
-    updatePosition();
-
-    let frame = null;
-    const scheduleUpdate = () => {
-      if (frame !== null) return;
-      frame = requestAnimationFrame(() => {
-        frame = null;
-        updatePosition();
-      });
-    };
-
-    window.addEventListener('scroll', scheduleUpdate, true);
-    window.addEventListener('resize', scheduleUpdate);
-
-    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);
-      if (frame !== null) cancelAnimationFrame(frame);
-      window.removeEventListener('scroll', scheduleUpdate, true);
-      window.removeEventListener('resize', scheduleUpdate);
-      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: 'fixed',
-            top: `${position.top}px`,
-            left: `${position.left}px`,
-            maxWidth: '500px',
-            zIndex: 1000,
-          }}
-        >
-          <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 };

package/src/components/EditableHtml.jsx

@@ -1,458 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash-es/debounce';
-import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
-import { styled } from '@mui/material/styles';
-import StarterKit from '@tiptap/starter-kit';
-import { TextStyleKit } from '@tiptap/extension-text-style';
-import { CharacterCount } from '@tiptap/extension-character-count';
-import SuperScript from '@tiptap/extension-superscript';
-import SubScript from '@tiptap/extension-subscript';
-import TextAlign from '@tiptap/extension-text-align';
-import Image from '@tiptap/extension-image';
-import Placeholder from '@tiptap/extension-placeholder';
-import { normalizeInitialMarkup } from '../utils/helper';
-
-import ExtendedTable from '../extensions/extended-table';
-import { ExtendedTableCell, ExtendedTableHeader } from '../extensions/extended-table-cell';
-import { DivNode } from '../extensions/div-node';
-import { EnsureEmptyRootIsDiv } from '../extensions/ensure-empty-root-div';
-import { EnsureListItemContentIsDiv } from '../extensions/ensure-list-item-content-is-div';
-import { TableRow } from '@tiptap/extension-table-row';
-import {
-  DragInTheBlankNode,
-  ExplicitConstructedResponseNode,
-  InlineDropdownNode,
-  MathTemplatedNode,
-  ResponseAreaExtension,
-} from '../extensions/responseArea';
-import { MathNode } from '../extensions/math';
-import { ImageUploadNode } from '../extensions/image';
-import { Media } from '../extensions/media';
-import { CSSMark } from '../extensions/css';
-import { ExtendedListItem } from '../extensions/extended-list-item';
-import { HeadingParagraph } from '../extensions/heading-paragraph';
-
-import EditorContainer from './TiptapContainer';
-import { valueToSize } from '../utils/size';
-import { buildExtensions, PLUGINS_MAP } from '../extensions';
-
-const defaultToolbarOpts = {
-  position: 'bottom',
-  alignment: 'left',
-  alwaysVisible: false,
-  showDone: true,
-  doneOn: 'blur',
-};
-
-const defaultResponseAreaProps = {
-  options: {},
-  respAreaToolbar: () => {},
-  onHandleAreaChange: () => {},
-};
-
-const DEFAULT_ACTIVE_PLUGINS = [
-  'bold',
-  'italic',
-  'underline',
-  'strikethrough',
-  'code',
-  'bulleted-list',
-  'numbered-list',
-  'image',
-  'math',
-  'languageCharacters',
-  'text-align',
-  'table',
-  'video',
-  'audio',
-  'responseArea',
-  'superscript',
-  'subscript',
-  'css',
-  'h3',
-  'undo',
-  'redo',
-];
-
-const cssVariables = {
-  '--white': '#fff',
-  '--black': '#2e2b29',
-  '--black-contrast': '#110f0e',
-  '--gray-1': 'rgba(61, 37, 20, .05)',
-  '--gray-2': 'rgba(61, 37, 20, .08)',
-  '--gray-3': 'rgba(61, 37, 20, .12)',
-  '--gray-4': 'rgba(53, 38, 28, .3)',
-  '--gray-5': 'rgba(28, 25, 23, .6)',
-  '--green': '#22c55e',
-  '--purple': '#6a00f5',
-  '--purple-contrast': '#5800cc',
-  '--purple-light': 'rgba(88, 5, 255, .05)',
-  '--yellow-contrast': '#facc15',
-  '--yellow': 'rgba(250, 204, 21, .4)',
-  '--yellow-light': '#fffae5',
-  '--red': '#ff5c33',
-  '--red-light': '#ffebe5',
-  '--shadow': `0px 12px 33px 0px rgba(0, 0, 0, .06),
-               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)`,
-};
-
-export const EditableHtml = (props) => {
-  const { showParagraphs, separateParagraphs } = props.pluginProps || {};
-  const [pendingImages, setPendingImages] = useState([]);
-  const [scheduled, setScheduled] = useState(false);
-  const { toolbarOpts } = props;
-
-  const removePendingImage = useCallback(
-    (imagePos) => {
-      setPendingImages((prev) => {
-        const next = prev.filter((img) => img.pos !== imagePos);
-        if (next.length === 0) {
-          setScheduled(false);
-        }
-        return next;
-      });
-    },
-    [setPendingImages],
-  );
-
-  const toolbarOptsToUse = {
-    ...defaultToolbarOpts,
-    ...toolbarOpts,
-  };
-
-  const commitEditorContent = useCallback(
-    (editor) => {
-      const html = editor.getHTML();
-
-      if (props.markup !== html) {
-        props.onChange?.(html);
-      }
-
-      if (toolbarOptsToUse.doneOn === 'blur') {
-        props.onDone?.(html);
-      }
-    },
-    [props.markup, props.onChange, props.onDone, toolbarOptsToUse.doneOn],
-  );
-
-  const responseAreaPropsToUse = useMemo(
-    () => ({
-      ...defaultResponseAreaProps,
-      ...props.responseAreaProps,
-      onInlineDropdownToolbarClose: commitEditorContent,
-    }),
-    [props.responseAreaProps, commitEditorContent],
-  );
-
-  const activePluginsToUse = useMemo(() => {
-    let { customPlugins, ...otherPluginProps } = props.pluginProps || {};
-
-    customPlugins = customPlugins || [];
-
-    const filteredActivePlugins = (props.activePlugins || DEFAULT_ACTIVE_PLUGINS)?.filter((pluginName) => {
-      const nameToUse = PLUGINS_MAP[pluginName] || pluginName;
-      const pluginInfo = otherPluginProps[nameToUse] || {};
-
-      return !pluginInfo || !pluginInfo.disabled;
-    });
-
-    return buildExtensions(filteredActivePlugins, customPlugins, {
-      math: {},
-      textAlign: props.textAlign,
-      html: {},
-      extraCSSRules: props.extraCSSRules || {},
-      image: {
-        ...props.imageSupport,
-      },
-      toolbar: {},
-      table: {},
-      responseArea: {
-        type: responseAreaPropsToUse.type,
-      },
-      languageCharacters: props.languageCharactersProps,
-      keyPadCharacterRef: {},
-      setKeypadInteraction: {},
-      media: {},
-    });
-  }, [props, responseAreaPropsToUse.type]);
-
-  const extensions = [
-    TextAlign.configure({
-      types: ['heading', 'paragraph', 'div', 'headingParagraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
-      alignments: ['left', 'right', 'center', 'justify'],
-    }),
-    TextStyleKit,
-    CharacterCount.configure({
-      limit: props.charactersLimit || 1000000,
-    }),
-    StarterKit.configure({
-      trailingNode: {
-        node: 'paragraph',
-        notAfter: ['paragraph', 'div'],
-      },
-    }),
-    ExtendedListItem,
-    DivNode,
-    HeadingParagraph,
-    EnsureEmptyRootIsDiv,
-    EnsureListItemContentIsDiv,
-    Placeholder.configure({
-      placeholder: props.placeholder,
-      // show placeholder even when editor is focused
-      showOnlyWhenEditable: true,
-      showOnlyCurrent: false, // show on all empty nodes, not only the current one
-      includeChildren: true,
-    }),
-    ExtendedTable,
-    TableRow,
-    ExtendedTableHeader,
-    ExtendedTableCell,
-    ResponseAreaExtension.configure(responseAreaPropsToUse),
-    ExplicitConstructedResponseNode.configure(responseAreaPropsToUse),
-    DragInTheBlankNode.configure(responseAreaPropsToUse),
-    InlineDropdownNode.configure(responseAreaPropsToUse),
-    MathTemplatedNode.configure(responseAreaPropsToUse),
-    MathNode.configure({
-      toolbarOpts: toolbarOptsToUse,
-      math: props.pluginProps?.math || {},
-    }),
-    SubScript,
-    SuperScript,
-    Image,
-    ImageUploadNode.configure({
-      toolbarOpts: toolbarOptsToUse,
-      imageHandling: {
-        disableImageAlignmentButtons: props.disableImageAlignmentButtons,
-        onDone: (editor) => props.onDone?.(editor.getHTML()),
-        onDelete:
-          props.imageSupport &&
-          props.imageSupport.delete &&
-          ((node) => {
-            const { src } = node.attrs;
-
-            props.imageSupport.delete(src, (e) => {
-              removePendingImage(node.pos);
-            });
-          }),
-        insertImageRequested:
-          props.imageSupport &&
-          ((editor, imageInfo, getHandler) => {
-            const [addedImage, pos] = imageInfo;
-
-            const onFinish = (result) => {
-              let cb;
-
-              if (scheduled && result) {
-              // finish editing only on success
-                cb = props.onChange;
-              }
-
-              removePendingImage(pos);
-              cb?.(editor.getHTML());
-            };
-
-            const callback = () => {
-              /**
-               * The handler is the object through which the outer context
-               * communicates file upload events like: fileChosen, cancel, progress
-               */
-              const handler = getHandler(onFinish);
-
-              // If the user closes the file picker without choosing a file, the window regains
-              // focus while _insertingImage is still true — drop the stale pending entry.
-              const focusHandler = debounce(() => {
-                const detach = () => window.removeEventListener('focus', focusHandler);
-
-                if (!editor._insertingImage) {
-                  detach();
-                  return;
-                }
-
-                removePendingImage(pos);
-                editor._insertingImage = false;
-                detach();
-              }, 500);
-
-              window.addEventListener('focus', focusHandler);
-
-              props.imageSupport.add(handler);
-            };
-
-            editor._insertingImage = true;
-            setPendingImages((prev) => [...prev, addedImage]);
-            callback();
-          }),
-        maxImageWidth: props.maxImageWidth,
-        maxImageHeight: props.maxImageHeight,
-      },
-      limit: 3,
-    }),
-    Media.configure({
-      uploadSoundSupport: props.uploadSoundSupport,
-    }),
-    CSSMark.configure({
-      extraCSSRules: props.extraCSSRules,
-    }),
-  ];
-
-  const editor = useEditor(
-    {
-      extensions,
-      immediatelyRender: false,
-      editorProps: {
-        handleKeyDown(view, event) {
-          if (props.onKeyDown) {
-            return props.onKeyDown(event);
-          }
-
-          // Return false to let default behavior continue
-          return false;
-        },
-      },
-      editable: !props.disabled,
-      content: normalizeInitialMarkup(props.markup),
-      onUpdate: ({ editor, transaction }) => {
-        if (transaction.isDone) {
-          props.onChange?.(editor.getHTML());
-        }
-      },
-      onBlur: ({ editor }) => {
-        const otherToolbarOpened =
-          editor._insertingImage ||
-          editor._toolbarOpened ||
-          editor.isActive('inline_dropdown') ||
-          editor.isActive('explicit_constructed_response');
-
-        if (otherToolbarOpened || !editor.schema) {
-          return;
-        }
-
-        commitEditorContent(editor);
-      },
-    },
-    [props.charactersLimit],
-  );
-
-  useEffect(() => {
-    if (props.editorRef) {
-      props.editorRef(editor);
-    }
-  }, [props.editorRef, editor]);
-
-  useEffect(() => {
-    editor?.setEditable(!props.disabled);
-  }, [props.disabled, editor]);
-
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    const nextMarkup = normalizeInitialMarkup(props.markup);
-
-    if (nextMarkup !== editor.getHTML()) {
-      editor.commands.setContent(nextMarkup, { emitUpdate: false });
-    }
-  }, [props.markup, editor]);
-
-  useEffect(() => {
-    Object.entries(cssVariables).forEach(([key, value]) => {
-      document.documentElement.style.setProperty(key, value);
-    });
-  }, []);
-
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => ({
-      isFocused: ctx.editor?.isFocused,
-    }),
-  });
-
-  const sizeStyle = useMemo(() => {
-    const { minWidth, width, maxWidth, minHeight, height, maxHeight } = props;
-
-    return {
-      width: valueToSize(width),
-      minWidth: valueToSize(minWidth),
-      maxWidth: valueToSize(maxWidth),
-      height: valueToSize(height),
-      minHeight: valueToSize(minHeight),
-      maxHeight: valueToSize(maxHeight),
-    };
-  }, [props]);
-
-  return (
-    <EditorContainer
-      {...{
-        ...props,
-        activePlugins: activePluginsToUse,
-        toolbarOpts: toolbarOptsToUse,
-      }}
-      editorState={editorState}
-      editor={editor}
-    >
-      {editor && (
-        <StyledEditorContent
-          style={{
-            minHeight: sizeStyle.minHeight,
-            height: sizeStyle.height,
-            maxHeight: sizeStyle.maxHeight,
-          }}
-          showParagraph={showParagraphs && !showParagraphs.disabled}
-          separateParagraph={separateParagraphs && !separateParagraphs.disabled}
-          editor={editor}
-        />
-      )}
-    </EditorContainer>
-  );
-};
-
-const StyledEditorContent = styled(EditorContent, {
-  shouldForwardProp: (prop) => !['showParagraph', 'separateParagraph'].includes(prop),
-})(({ showParagraph, separateParagraph }) => ({
-  display: 'flex',
-  outline: 'none !important',
-  '& .ProseMirror': {
-    flex: 1,
-    padding: '5px',
-    maxHeight: '500px',
-    outline: 'none !important',
-    position: 'initial',
-
-    // reset default margins for all block paragraphs/divs in the editor
-    '& > p, & > div': {
-      margin: '0',
-    },
-
-    // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
-    // :only-child ensures the placeholder is hidden whenever the editor has other content (images, upload nodes, etc.)
-    // and covers the type+backspace edge case where Tiptap only adds is-empty (not is-editor-empty).
-    '& p[data-placeholder].is-empty:only-child, & div[data-placeholder].is-empty:only-child': {
-      position: 'relative',
-    },
-    '& p[data-placeholder].is-empty:only-child::before, & div[data-placeholder].is-empty:only-child::before': {
-      content: 'attr(data-placeholder)',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      color: '#9CA3AF',
-      pointerEvents: 'none',
-      whiteSpace: 'pre-wrap',
-    },
-
-    ...(showParagraph && {
-      '& > p:has(+ p)::after, & > div:has(+ div)::after': {
-        display: 'block',
-        content: '"¶"',
-        fontSize: '1em',
-        color: '#146EB3',
-      },
-    }),
-    ...(separateParagraph && {
-      '& > p:has(+ p)': {
-        marginBottom: '1em',
-      },
-    }),
-  },
-}));
-
-export default EditableHtml;