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

package/src/extensions/image-component.jsx

@@ -1,340 +0,0 @@
-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 || !imgRef.current.naturalWidth) 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 && editor.isEditable) {
-        // 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, editor.isEditable]);
-
-  useEffect(() => {
-    applySizeData();
-
-    const resizeHandle = resizeRef?.current;
-
-    if (resizeHandle && editor.isEditable) {
-      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" style={{ display: editor.isEditable ? undefined : 'none' }} />
-        </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

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

@@ -1,81 +0,0 @@
-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),
-  ]);
-};