@pie-lib/editable-html-tip-tap 2.1.2-next.0 → 2.1.2-next.104

package/src/components/CharacterPicker.jsx

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

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