@pie-lib/editable-html-tip-tap 1.0.1 → 1.0.3

package/src/components/CharacterPicker.jsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import get from 'lodash/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 [position, setPosition] = useState({ top: 0, left: 0 });
+  const [popover, setPopover] = useState(null);
+
+  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();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    // Calculate position relative to selection
+    const bodyRect = document.body.getBoundingClientRect();
+    const { from } = editor.state.selection;
+    const start = editor.view.coordsAtPos(from);
+    setPosition({
+      top: start.top + Math.abs(bodyRect.top) + 40, // shift above
+      left: start.left,
+    });
+
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target) && !editor.view.dom.contains(e.target)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [editor, onClose]);
+
+  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"
+          style={{
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            maxWidth: '500px',
+          }}
+        >
+          <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,306 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+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 { withStyles } from '@material-ui/core/styles';
+
+import ExtendedTable from '../extensions/extended-table';
+import { TableRow } from '@tiptap/extension-table-row';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import {
+  ExplicitConstructedResponseNode,
+  DragInTheBlankNode,
+  InlineDropdownNode,
+  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 EditorContainer from './TiptapContainer';
+import { valueToSize } from '../utils/size';
+import { buildExtensions } 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 [pendingImages, setPendingImages] = useState([]);
+  const [scheduled, setScheduled] = useState(false);
+  const { classes, toolbarOpts } = props;
+
+  const toolbarOptsToUse = {
+    ...defaultToolbarOpts,
+    ...toolbarOpts,
+  };
+
+  const activePluginsToUse = useMemo(() => {
+    let { customPlugins } = props.pluginProps || {};
+
+    customPlugins = customPlugins || [];
+
+    return buildExtensions(props.activePlugins, customPlugins, {
+      math: {},
+      textAlign: {},
+      html: {},
+      extraCSSRules: props.extraCSSRules || {},
+      image: {},
+      toolbar: {},
+      table: {},
+      responseArea: {
+        type: props.responseAreaProps?.type,
+      },
+      languageCharacters: props.languageCharactersProps,
+      keyPadCharacterRef: {},
+      setKeypadInteraction: {},
+      media: {},
+    });
+  }, [props]);
+
+  const extensions = [
+    TextStyleKit,
+    StarterKit,
+    ExtendedTable,
+    TableRow,
+    TableHeader,
+    TableCell,
+    ResponseAreaExtension,
+    ExplicitConstructedResponseNode.configure(props.responseAreaProps),
+    DragInTheBlankNode.configure(props.responseAreaProps),
+    InlineDropdownNode.configure(props.responseAreaProps),
+    MathNode.configure({
+      toolbarOpts: toolbarOptsToUse,
+    }),
+    SubScript,
+    SuperScript,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+      alignments: ['left', 'right', 'center'],
+    }),
+    Image,
+    ImageUploadNode.configure({
+      toolbarOpts: toolbarOptsToUse,
+      imageHandling: {
+        disableImageAlignmentButtons: props.disableImageAlignmentButtons,
+        onDone: () => props.onDone?.(editor.getHTML()),
+        onDelete:
+          props.imageSupport &&
+          props.imageSupport.delete &&
+          ((node, done) => {
+            const { src } = node.attrs;
+
+            props.imageSupport.delete(src, (e) => {
+              const newPendingImages = pendingImages.filter((img) => img.key !== node.key);
+              const newState = {
+                pendingImages: newPendingImages,
+                scheduled: scheduled && newPendingImages.length === 0 ? false : scheduled,
+              };
+
+              setPendingImages(newState.pendingImages);
+              setScheduled(newState.scheduled);
+              done();
+            });
+          }),
+        insertImageRequested:
+          props.imageSupport &&
+          ((addedImage, getHandler) => {
+            const onFinish = (result) => {
+              let cb;
+
+              if (scheduled && result) {
+                // finish editing only on success
+                cb = props.onChange;
+              }
+
+              const newPendingImages = pendingImages.filter((img) => img.key !== addedImage.key);
+              const newState = {
+                pendingImages: newPendingImages,
+              };
+
+              if (newPendingImages.length === 0) {
+                newState.scheduled = false;
+              }
+
+              setPendingImages(newState.pendingImages);
+              setScheduled(newState.scheduled);
+              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);
+              props.imageSupport.add(handler);
+            };
+
+            setPendingImages([...pendingImages, 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,
+    editable: !props.disabled,
+    content: props.markup,
+    onUpdate: ({ editor, transaction }) => transaction.isDone && props.onChange?.(editor.getHTML()),
+    onBlur: ({ editor }) => {
+      if (toolbarOptsToUse.doneOn === 'blur') {
+        props.onChange?.(editor.getHTML());
+      } else {
+        props.onDone?.(editor.getHTML());
+      }
+    },
+  });
+
+  useEffect(() => {
+    editor?.setEditable(!props.disabled);
+  }, [props.disabled, editor]);
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    if (props.markup !== editor.getHTML()) {
+      editor.commands.setContent(props.markup, false); // false = don’t emit update
+    }
+  }, [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 && (
+        <EditorContent
+          style={{
+            minHeight: sizeStyle.minHeight,
+            height: sizeStyle.height,
+            maxHeight: sizeStyle.maxHeight,
+          }}
+          className={classes.root}
+          editor={editor}
+        />
+      )}
+    </EditorContainer>
+  );
+};
+
+const StyledEditor = withStyles({
+  root: {
+    outline: 'none !important',
+    '& .ProseMirror': {
+      outline: 'none !important',
+      position: 'initial',
+    },
+  },
+})(EditableHtml);
+
+export default StyledEditor;