@pie-lib/editable-html-tip-tap 1.0.0

package/src/extensions/characters.js

@@ -0,0 +1,46 @@
+// InlineNodes.js
+import React from 'react';
+import { Node, ReactNodeViewRenderer } from '@tiptap/react';
+import ExplicitConstructedResponse from '../plugins/respArea/explicit-constructed-response';
+import DragInTheBlank from '../plugins/respArea/drag-in-the-blank';
+import InlineDropdown from '../plugins/respArea/inline-dropdown';
+
+/**
+ * ExplicitConstructedResponse Node
+ */
+export const ExplicitConstructedResponseNode = Node.create({
+  name: 'explicit_constructed_response',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return {
+      index: { default: null },
+      value: { default: '' },
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-type="explicit_constructed_response"]',
+        getAttrs: (el) => ({
+          index: el.dataset.index,
+          value: el.dataset.value,
+        }),
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      {
+        'data-type': 'explicit_constructed_response',
+        'data-index': HTMLAttributes.index,
+        'data-value': HTMLAttributes.value,
+      },
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ExplicitConstructedResponse);
+  },
+});

package/src/extensions/component.jsx

@@ -0,0 +1,294 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
+import debug from 'debug';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import { withStyles } from '@material-ui/core/styles';
+import { NodeViewWrapper } from '@tiptap/react';
+import InsertImageHandler from '../plugins/image/insert-image-handler';
+import ImageToolbar from '../plugins/image/image-toolbar';
+import CustomToolbarWrapper from "./custom-toolbar-wrapper";
+
+const log = debug('@pie-lib:editable-html:plugins:image:component');
+
+const sizePx = (s) => (s ? `${s}px` : 'calc(20px)');
+
+function ImageComponent(props) {
+  const {
+    node,
+    editor,
+    classes,
+    attributes,
+    onFocus,
+    selected,
+    options,
+    maxImageWidth = 700,
+    maxImageHeight = 900,
+    latex,
+    handleChange,
+    handleDone,
+  } = props;
+  const { alt } = node.attrs;
+
+  const [showToolbar, setShowToolbar] = useState(false);
+
+  const imgRef = useRef(null);
+  const resizeRef = useRef(null);
+  const toolbarRef = useRef(null);
+
+  const getPercentFromWidth = useCallback((width) => {
+    const floored = (width / imgRef.current.naturalWidth) * 4;
+    return parseInt(floored.toFixed(0) * 25, 10);
+  }, []);
+
+  const applySizeData = useCallback(() => {
+    if (!node.attrs.width || !imgRef.current) return;
+
+    const update = {
+      ...node.attrs,
+      resizePercent: getPercentFromWidth(node.attrs.width),
+    };
+
+    if (!isEqual(update, node.attrs)) {
+      editor.commands.updateAttributes('imageUploadNode', update);
+    }
+  }, [editor, node.attrs, getPercentFromWidth]);
+
+  useEffect(() => {
+    setShowToolbar(selected);
+  }, [selected]);
+
+  useEffect(() => {
+    options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, finish));
+    applySizeData();
+
+    const resizeHandle = resizeRef.current;
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', initResize, false);
+    }
+    return () => {
+      if (resizeHandle) resizeHandle.removeEventListener('mousedown', initResize, false);
+    };
+  }, []);
+
+  useEffect(() => {
+    applySizeData();
+  });
+
+  const loadImage = useCallback(() => {
+    const box = imgRef.current;
+    if (!box) return;
+
+    if (!box.style.width || box.style.width === 'calc(20px)') {
+      const w = Math.min(box.naturalWidth, maxImageWidth);
+      const h = Math.min(box.naturalHeight, maxImageHeight);
+
+      box.style.width = `${w}px`;
+      box.style.height = `${h}px`;
+
+      const update = { width: w, height: h };
+      if (!isEqual(update, node.attrs)) {
+        editor.commands.updateAttributes('imageUploadNode', update);
+      }
+    }
+  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);
+
+  const updateAspect = (initial, next, keepAspect = true, resizeType) => {
+    if (keepAspect) {
+      const ratio = initial.width / initial.height;
+      if (resizeType === 'height') return { width: next.height * ratio, height: next.height };
+      return { width: next.width, height: next.width / ratio };
+    }
+    return next;
+  };
+
+  const startResize = useCallback(
+    (e) => {
+      const box = imgRef.current;
+      if (!box) return;
+
+      const bounds = e.target.getBoundingClientRect();
+      const initial = { width: box.naturalWidth, height: box.naturalHeight };
+
+      const next = updateAspect(initial, {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top,
+      });
+
+      if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {
+        box.style.width = `${next.width}px`;
+        box.style.height = `${next.height}px`;
+
+        const update = { width: next.width, height: next.height };
+        if (!isEqual(update, node.attrs)) {
+          editor.commands.updateAttributes('imageUploadNode', update);
+        }
+      }
+    },
+    [editor, node.attrs],
+  );
+
+  const onChange = useCallback(
+    (newValues) => {
+      editor.commands.updateAttributes('imageUploadNode', newValues);
+    },
+    [editor],
+  );
+
+  const stopResize = useCallback(() => {
+    window.removeEventListener('mousemove', startResize);
+    window.removeEventListener('mouseup', stopResize);
+  }, [startResize]);
+
+  const initResize = useCallback(() => {
+    window.addEventListener('mousemove', startResize);
+    window.addEventListener('mouseup', stopResize);
+  }, [startResize, stopResize]);
+
+  const style = {
+    width: sizePx(node.attrs.width),
+    height: sizePx(node.attrs.height),
+    objectFit: 'contain',
+  };
+
+  const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';
+
+  return (
+    <NodeViewWrapper>
+      <div
+        onFocus={onFocus}
+        className={classNames(
+          classes.root,
+          !node.attrs.loaded && classes.loading,
+          node.attrs.deleteStatus === 'pending' && classes.pendingDelete,
+        )}
+        style={{ justifyContent: flexAlign }}
+      >
+        <LinearProgress
+          mode="determinate"
+          value={node.attrs.percent || 0}
+          className={classNames(classes.progress, node.attrs.loaded && classes.hideProgress)}
+        />
+
+        <div className={classes.imageContainer}>
+          <img
+            {...attributes}
+            ref={imgRef}
+            src={node.attrs.src}
+            className={classNames(classes.image, selected && classes.active)}
+            style={style}
+            onLoad={loadImage}
+            alt={node.attrs.alt}
+          />
+          <div ref={resizeRef} className={classNames(classes.resize, 'resize')} />
+        </div>
+      </div>
+
+      {showToolbar && (
+        <div
+          ref={toolbarRef}
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            zIndex: 20,
+            background: 'var(--editable-html-toolbar-bg, #efefef)',
+            boxShadow:
+              '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+            width: '100%'
+          }}
+        >
+          <CustomToolbarWrapper showDone {...options}>
+            <ImageToolbar
+              disableImageAlignmentButtons={options.disableImageAlignmentButtons}
+              alt={node.attrs.alt}
+              imageLoaded={node.attrs.loaded}
+              alignment={node.attrs.alignment || 'left'}
+              onChange={onChange}
+            />
+          </CustomToolbarWrapper>
+        </div>
+      )}
+    </NodeViewWrapper>
+  );
+}
+
+ImageComponent.propTypes = {
+  node: PropTypes.object.isRequired,
+  editor: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  maxImageWidth: PropTypes.number,
+  maxImageHeight: PropTypes.number,
+};
+
+export default withStyles((theme) => ({
+  portal: {
+    position: 'absolute',
+    opacity: 0,
+    transition: 'opacity 200ms linear',
+  },
+  floatingButtonRow: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: '1px',
+    display: 'flex',
+    padding: '10px',
+    border: `solid 1px ${theme.palette.grey[200]}`,
+    boxShadow:
+      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+  },
+  progress: {
+    position: 'absolute',
+    left: '0',
+    width: 'fit-content',
+    top: '0%',
+    transition: 'opacity 200ms linear',
+  },
+  hideProgress: {
+    opacity: 0,
+  },
+  loading: {
+    opacity: 0.3,
+  },
+  pendingDelete: {
+    opacity: 0.3,
+  },
+  root: {
+    position: 'relative',
+    border: `solid 1px ${theme.palette.common.white}`,
+    display: 'flex',
+    transition: 'opacity 200ms linear',
+  },
+  delete: {
+    position: 'absolute',
+    right: 0,
+  },
+  imageContainer: {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+
+    '&&:hover > .resize': {
+      display: 'block',
+    },
+  },
+  active: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  },
+  resize: {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none',
+  },
+  drawableHeight: {
+    minHeight: 350,
+  },
+}))(ImageComponent);

package/src/extensions/css.js

@@ -0,0 +1,217 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Mark, mergeAttributes } from '@tiptap/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-css-dialog');
+
+  prevDialogs.forEach((s) => s.remove());
+};
+
+const insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {
+  const editorDOM = editor.options.element;
+  const newEl = document.createElement('div');
+  const { selection } = editor.state;
+
+  removeDialogs();
+
+  newEl.className = 'insert-css-dialog';
+
+  let popoverEl;
+
+  const closePopOver = () => {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+  };
+
+  let firstCallMade = false;
+
+  const listener = (e) => {
+    // this will be triggered right after setting it because
+    // this toolbar is added on the mousedown event
+    // so right after mouseup, the click will be triggered
+    if (firstCallMade) {
+      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
+      const focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
+  const handleClose = () => {
+    callback(undefined, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const handleChange = (name) => {
+    callback(name, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const parentNodeClass = parentNode?.attrs.class;
+  const createHTML = (name) => {
+    let html = `<span class="${name}">${selectedText}</span>`;
+
+    if (parentNode) {
+      let tag = 'span';
+
+      if (parentNode?.object === 'inline') {
+        tag = 'span';
+      }
+
+      if (parentNode?.object === 'block') {
+        tag = 'div';
+      }
+
+      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(0, selection.$anchor.textOffset)}${html}${parentNode.text.slice(
+        selection.$head.textOffset,
+      )}</${tag}>`;
+    }
+
+    return html;
+  };
+
+  const el = (
+    <div
+      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}
+    >
+      <h2>Please choose a css class</h2>
+      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}
+      <List component="nav" style={{ overflow: 'scroll' }}>
+        {opts.names.map((name, i) => (
+          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>
+            <div style={{ marginRight: 20 }}>{name}</div>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: createHTML(name),
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = editor.view.nodeDOM(editor.state.selection.from);
+    const cursorNode = cursorItem?.parentNode;
+
+    if (cursorNode) {
+      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
+      const boundRect = cursorNode.getBoundingClientRect();
+
+      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);
+
+      newEl.style.maxWidth = '500px';
+      newEl.style.position = 'absolute';
+      newEl.style.top = 0;
+      newEl.style.zIndex = 99999;
+
+      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorNode.offsetWidth + 10}px`;
+
+      const rightValue = `${boundRect.x}px`;
+
+      newEl.style.left = leftValue;
+
+      const leftAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+
+      const rightAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = 'unset';
+
+      if (leftAlignedWidth >= rightAlignedWidth) {
+        newEl.style.left = leftValue;
+      } else {
+        newEl.style.right = rightValue;
+      }
+
+      document.body.addEventListener('click', listener);
+    }
+  });
+};
+
+export const CSSMark = Mark.create({
+  name: 'cssmark',
+
+  addOptions() {
+    return {
+      classes: [],
+    };
+  },
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (el) => el.getAttribute('class'),
+        renderHTML: (attributes) => {
+          if (!attributes.class) return {};
+          return { class: attributes.class };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    // Any span with a class that matches one of allowed classes
+    return [
+      {
+        tag: 'span[class]',
+        getAttrs: (el) => {
+          const cls = el.getAttribute('class') || '';
+          const match = this.options.classes.find((name) => cls.includes(name));
+          return match ? { class: match } : false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setCSSClass: (className) => ({ commands }) => {
+        return commands.setMark(this.name, { class: className });
+      },
+
+      unsetCSSClass: () => ({ commands }) => {
+        return commands.unsetMark(this.name);
+      },
+
+      openCSSClassDialog: () => ({ editor }) => {
+        insertDialog({
+          editor,
+          selectedText: editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to),
+          parentNode: editor.state.selection.$from.nodeAfter,
+          opts: this.options.extraCSSRules,
+          callback: (className) => {
+            if (className) {
+              editor
+                .chain()
+                .focus()
+                .setCSSClass(className)
+                .run();
+            }
+          },
+        });
+      },
+    };
+  },
+});

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import IconButton from "@material-ui/core/IconButton";
+import Delete from "@material-ui/icons/Delete";
+import { DoneButton } from "../plugins/toolbar/done-button";
+import classNames from "classnames";
+import { PIE_TOOLBAR__CLASS } from "../constants";
+import { withStyles } from "@material-ui/core/styles";
+import { Toolbar } from "../plugins/toolbar/toolbar";
+
+function CustomToolbarWrapper(props) {
+  const {
+    children,
+    deletable,
+    classes,
+    toolbarOpts,
+    autoWidth,
+    isFocused,
+    doneButtonRef,
+    onDelete,
+    showDone,
+    onDone,
+  } = props;
+  const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
+    [classes.toolbarWithNoDone]: !showDone,
+    [classes.toolbarRight]: toolbarOpts.alignment === 'right',
+    [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
+    [classes.autoWidth]: autoWidth,
+    [classes.fullWidth]: !autoWidth,
+    [classes.hidden]: toolbarOpts.isHidden === true,
+  });
+  const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
+
+  return (
+    <div className={names} style={{ ...customStyles }}>
+      {children}
+
+      <div className={classes.shared}>
+        {deletable && (
+          <IconButton
+            aria-label="Delete"
+            className={classes.iconRoot}
+            onMouseDown={(e) => onDelete?.(e)}
+            classes={{
+              root: classes.iconRoot,
+            }}
+          >
+            <Delete />
+          </IconButton>
+        )}
+        {showDone && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
+      </div>
+    </div>
+  );
+}
+
+const style = {
+  toolbar: {
+    position: 'absolute',
+    zIndex: 10,
+    cursor: 'pointer',
+    justifyContent: 'space-between',
+    background: 'var(--editable-html-toolbar-bg, #efefef)',
+    minWidth: '280px',
+    margin: '5px 0 0 0',
+    padding: '2px',
+    boxShadow:
+      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    opacity: 1,
+  },
+  toolbarWithNoDone: {
+    minWidth: '265px',
+  },
+  toolbarRight: {
+    right: 0,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  hidden: {
+    visibility: 'hidden',
+  },
+  autoWidth: {
+    width: 'auto',
+  },
+  iconRoot: {
+    width: '28px',
+    height: '28px',
+    padding: '4px',
+    verticalAlign: 'top',
+  },
+  label: {
+    color: 'var(--editable-html-toolbar-check, #00bb00)',
+  },
+  shared: {
+    display: 'flex',
+  },
+};
+export default withStyles(style, { index: 1000 })(CustomToolbarWrapper);

package/src/extensions/image.js

@@ -0,0 +1,55 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import React, { useRef, useState, useCallback } from 'react';
+import ImageComponent from './component';
+
+// ---- Tiptap Extension ---- //
+
+export const ImageUploadNode = Node.create({
+  name: 'imageUploadNode',
+
+  group: 'block',
+  atom: true, // ✅ prevents content holes
+  selectable: true, // optional
+  draggable: true, // optional
+
+  addAttributes() {
+    return {
+      loaded: { default: false },
+      deleteStatus: { default: null },
+      alignment: { default: null },
+      percent: { default: null },
+      width: { default: null },
+      height: { default: null },
+      src: { default: null },
+      alt: { default: null },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="image-upload-node"]',
+      },
+    ];
+  },
+
+  // ✅ No `0` here!
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);
+  },
+
+  addCommands() {
+    return {
+      setImageUploadNode: () => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+        });
+      },
+    };
+  },
+});