@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.36

package/src/extensions/image-component.jsx

@@ -0,0 +1,338 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash-es/isEqual';
+import debug from 'debug';
+import LinearProgress from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
+import { NodeViewWrapper } from '@tiptap/react';
+import ReactDOM from 'react-dom';
+import InsertImageHandler from '../components/image/InsertImageHandler';
+import ImageToolbar from '../components/image/ImageToolbar';
+import CustomToolbarWrapper from './custom-toolbar-wrapper';
+
+const log = debug('@pie-lib:editable-html:plugins:image:component');
+
+const StyledProgress = styled(LinearProgress, {
+  shouldForwardProp: (prop) => prop !== 'hideProgress',
+})(({ hideProgress }) => ({
+  position: 'absolute',
+  left: '0',
+  width: 'fit-content',
+  top: '0%',
+  transition: 'opacity 200ms linear',
+  ...(hideProgress && {
+    opacity: 0,
+  }),
+}));
+
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),
+})(({ loading, pendingDelete }) => ({
+  position: 'relative',
+  display: 'flex',
+  transition: 'opacity 200ms linear',
+  ...(loading && {
+    opacity: 0.3,
+  }),
+  ...(pendingDelete && {
+    opacity: 0.3,
+  }),
+}));
+
+const StyledImageContainer = styled('div')(({ theme }) => ({
+  position: 'relative',
+  width: 'fit-content',
+  display: 'flex',
+  alignItems: 'center',
+  '&&:hover > .resize': {
+    display: 'block',
+  },
+}));
+
+const StyledImage = styled('img', {
+  shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => ({
+  border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',
+}));
+
+const StyledResize = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  cursor: 'col-resize',
+  height: '35px',
+  width: '5px',
+  borderRadius: 8,
+  marginLeft: '5px',
+  marginRight: '10px',
+  display: 'none',
+}));
+
+const sizePx = (s) => (s ? `${s}px` : 'calc(20px)');
+
+function ImageComponent(props) {
+  const {
+    node,
+    editor,
+    attributes,
+    onFocus,
+    getPos,
+    selected,
+    options,
+    maxImageWidth = 700,
+    maxImageHeight = 900,
+  } = props;
+  const { alt } = node.attrs;
+  const pos = getPos();
+
+  const selFrom = editor.state.selection.from;
+  const selTo = editor.state.selection.to;
+  const onlyThisNodeSelected = useMemo(() => selFrom + node.nodeSize === selTo, [selFrom, selTo, node.nodeSize]);
+
+  const [showToolbar, setShowToolbar] = useState(false);
+
+  const latestNodeRef = useRef(node);
+  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 findNodePos = useCallback(() => {
+    const key = latestNodeRef.current.attrs.nodeKey;
+    let found = null;
+    editor.state.doc.descendants((n, pos) => {
+      if (found !== null) return false;
+      if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {
+        found = pos;
+        return false;
+      }
+    });
+    return found;
+  }, [editor]);
+
+  // dispatch an attribute update targeted precisely at this node by nodeKey.
+  const updateThisNode = useCallback(
+    (newAttrs) => {
+      const nodePos = findNodePos();
+      if (nodePos === null) return;
+      const currentNode = editor.state.doc.nodeAt(nodePos);
+      if (!currentNode) return;
+      editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }));
+    },
+    [editor, findNodePos],
+  );
+
+  const applySizeData = useCallback(() => {
+    if (!node.attrs.width || !imgRef.current) return;
+    const resizePercent = getPercentFromWidth(node.attrs.width);
+    if (node.attrs.resizePercent === resizePercent) return;
+    updateThisNode({ resizePercent });
+  }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);
+
+  // keep ref in sync with latest node
+  useEffect(() => {
+    latestNodeRef.current = { ...node, pos };
+  }, [node, pos]);
+
+  useEffect(() => {
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        // Only open the upload UI for a fresh placeholder. Remounting after tab switch
+        // would otherwise call insertImageRequested again and reopen the file modal.
+        const hasImageSrc = String(node.attrs?.src ?? '').trim();
+
+        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
+          options.imageHandling.insertImageRequested(
+            editor,
+            [node, pos],
+            (finish) => new InsertImageHandler(editor, [node, pos], finish),
+          );
+        }
+
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [onlyThisNodeSelected, selected]);
+
+  useEffect(() => {
+    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, { width: node.attrs.width, height: node.attrs.height })) {
+        updateThisNode(update);
+      }
+    }
+  }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);
+
+  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`;
+
+        updateThisNode({ width: next.width, height: next.height });
+      }
+    },
+    [editor, updateThisNode],
+  );
+
+  const onChange = useCallback(
+    (newValues) => {
+      updateThisNode(newValues);
+    },
+    [editor, updateThisNode],
+  );
+
+  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>
+      <StyledRoot
+        onFocus={onFocus}
+        loading={!node.attrs.loaded}
+        pendingDelete={node.attrs.deleteStatus === 'pending'}
+        style={{ justifyContent: flexAlign }}
+      >
+        <StyledProgress mode="determinate" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />
+
+        <StyledImageContainer onDragStart={(e) => e.preventDefault()}>
+          <StyledImage
+            {...attributes}
+            active={selected && node.attrs.loaded}
+            draggable={false}
+            ref={imgRef}
+            src={node.attrs.src}
+            style={style}
+            onLoad={loadImage}
+            alt={node.attrs.alt}
+          />
+          <StyledResize ref={resizeRef} className="resize" />
+        </StyledImageContainer>
+      </StyledRoot>
+
+      {showToolbar &&
+        editor._tiptapContainerEl &&
+        ReactDOM.createPortal(
+          <div
+            ref={toolbarRef}
+            style={{
+              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
+              deletable
+              toolbarOpts={options.toolbarOpts || {}}
+              onDelete={() => {
+                const nodePos = findNodePos();
+                if (nodePos === null) return;
+
+                options.imageHandling?.onDelete?.(latestNodeRef.current);
+
+                editor.view.dispatch(
+                  editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),
+                );
+                setShowToolbar(false);
+                editor.commands.focus();
+              }}
+              onDone={() => {
+                setShowToolbar(false);
+                options.imageHandling?.onDone?.(editor);
+                editor.commands.focus('end');
+              }}
+            >
+              <ImageToolbar
+                disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}
+                alt={node.attrs.alt}
+                imageLoaded={node.attrs.loaded}
+                alignment={node.attrs.alignment || 'left'}
+                onChange={onChange}
+              />
+            </CustomToolbarWrapper>
+          </div>,
+          editor._tiptapContainerEl,
+        )}
+    </NodeViewWrapper>
+  );
+}
+
+ImageComponent.propTypes = {
+  node: PropTypes.object.isRequired,
+  editor: PropTypes.object.isRequired,
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  maxImageWidth: PropTypes.number,
+  maxImageHeight: PropTypes.number,
+};
+
+export default ImageComponent;

package/src/extensions/image.js

@@ -0,0 +1,109 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { Plugin } from '@tiptap/pm/state';
+import React from 'react';
+import ImageComponent from './image-component';
+import { node } from 'prop-types';
+
+export const ImageUploadNode = Node.create({
+  name: 'imageUploadNode',
+
+  group: 'block',
+  atom: true, // ✅ prevents content holes
+  selectable: true, // optional
+  draggable: true, // optional
+
+  addAttributes() {
+    return {
+      nodeKey: { default: null },
+      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: 'img[data-type="image-upload-node"]',
+      },
+    ];
+  },
+
+  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,
+              // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
+              attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },
+          });
+        },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+
+    return [
+      new Plugin({
+        props: {
+          handlePaste(view, event) {
+            const items = Array.from(event.clipboardData?.items || []);
+
+            const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));
+
+            if (!imageItem) {
+              return false;
+            }
+
+            const file = imageItem.getAsFile();
+
+            if (!file) {
+              return false;
+            }
+
+            // Example 1: insert as base64 immediately
+            const reader = new FileReader();
+
+            reader.onload = () => {
+              const src = reader.result;
+
+              if (typeof src !== 'string') {
+                return;
+              }
+
+              editor.commands.insertContent({
+                type: 'imageUploadNode',
+                attrs: {
+                  src,
+                  loaded: true,
+                  nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+                },
+              });
+            };
+
+            reader.readAsDataURL(file);
+
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/index.js

@@ -0,0 +1,81 @@
+import compact from 'lodash-es/compact';
+import isEmpty from 'lodash-es/isEmpty';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins');
+export const ALL_PLUGINS = [
+  'bold',
+  // 'code',
+  'html',
+  'extraCSSRules',
+  'italic',
+  'underline',
+  'strikethrough',
+  'bulleted-list',
+  'numbered-list',
+  'image',
+  'math',
+  'languageCharacters',
+  'text-align',
+  'blockquote',
+  'h3',
+  'table',
+  'video',
+  'audio',
+  'responseArea',
+  'redo',
+  'undo',
+  'superscript',
+  'subscript',
+];
+
+export const PLUGINS_MAP = {
+  'text-align': 'textAlign',
+  'bulleted-list': 'ul_list',
+  'numbered-list': 'ol_list',
+};
+
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));
+
+export const buildExtensions = (activeExtensions, customExtensions, opts) => {
+  log('[buildPlugins] opts: ', opts);
+
+  activeExtensions = activeExtensions || DEFAULT_PLUGINS;
+
+  const addIf = (key, shouldAdd = true) => activeExtensions.includes(key) && shouldAdd && key;
+
+  const imagePlugin = opts.image && opts.image.delete;
+  const mathPlugin = opts.math;
+  const respAreaPlugin = opts.responseArea && opts.responseArea.type;
+  const cssPlugin = !isEmpty(opts.extraCSSRules);
+
+  const languageCharactersPlugins = opts?.languageCharacters || [];
+
+  return compact([
+    addIf('table'),
+    addIf('bold'),
+    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),
+    addIf('italic'),
+    addIf('strikethrough'),
+    addIf('underline'),
+    // icon should be modifies accordingly
+    addIf('superscript'),
+    // icon should be modifies accordingly
+    addIf('subscript'),
+    addIf('image', !!imagePlugin),
+    addIf('video'),
+    addIf('audio'),
+    addIf('math', !!mathPlugin),
+    ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),
+    addIf('text-align'),
+    addIf('blockquote'),
+    addIf('h3'),
+    addIf('bulleted-list'),
+    addIf('numbered-list'),
+    addIf('undo'),
+    addIf('redo'),
+    addIf('responseArea', !!respAreaPlugin),
+    addIf('css', !!cssPlugin),
+    addIf('html', !!opts.html),
+  ]);
+};