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

package/src/extensions/image-component.tsx

@@ -0,0 +1,303 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/image-component.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash-es/isEqual.js';
+import debug from 'debug';
+import LinearProgress from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
+import { NodeViewWrapper } from '@tiptap/react';
+import InsertImageHandler from '../components/image/InsertImageHandler.js';
+import ImageToolbar from '../components/image/ImageToolbar.js';
+import CustomToolbarWrapper from './custom-toolbar-wrapper.js';
+
+const log = debug('@pie-lib:editable-html:plugins:image:component');
+
+const StyledProgress: any = 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: any = styled('div', {
+  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),
+})(({ theme, active, loading, pendingDelete }) => ({
+  position: 'relative',
+  border: active ? `solid 1px ${theme.palette.primary.main}` : `solid 1px ${theme.palette.common.white}`,
+  display: 'flex',
+  transition: 'opacity 200ms linear',
+  ...(loading && {
+    opacity: 0.3,
+  }),
+  ...(pendingDelete && {
+    opacity: 0.3,
+  }),
+}));
+
+const StyledImageContainer: any = styled('div')(({ theme }) => ({
+  position: 'relative',
+  width: 'fit-content',
+  display: 'flex',
+  alignItems: 'center',
+  '&&:hover > .resize': {
+    display: 'block',
+  },
+}));
+
+const StyledResize: any = 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,
+    selected,
+    options,
+    maxImageWidth = 700,
+    maxImageHeight = 900,
+    latex,
+    handleChange,
+    handleDone,
+  } = props;
+  const { alt } = node.attrs;
+
+  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 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]);
+
+  // keep ref in sync with latest node
+  useEffect(() => {
+    latestNodeRef.current = node;
+  }, [node]);
+
+  useEffect(() => {
+    const { selection } = editor.state;
+    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
+
+  useEffect(() => {
+    options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));
+    applySizeData();
+
+    const resizeHandle = resizeRef.current;
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', initResize, false);
+    }
+    return () => {
+      if (resizeHandle) {
+        resizeHandle.removeEventListener('mousedown', initResize, false);
+      }
+
+      options.imageHandling.onDelete(latestNodeRef.current);
+    };
+  }, []);
+
+  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>
+      <StyledRoot
+        onFocus={onFocus}
+        active={selected}
+        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>
+          <img
+            {...attributes}
+            ref={imgRef}
+            src={node.attrs.src}
+            style={style}
+            onLoad={loadImage}
+            alt={node.attrs.alt}
+          />
+          <StyledResize ref={resizeRef} className="resize" />
+        </StyledImageContainer>
+      </StyledRoot>
+
+      {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}
+            onDone={() => {
+              setShowToolbar(false);
+              props.imageHandling?.onDone();
+              props.editor.commands.focus('end');
+            }}
+          >
+            <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,
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  maxImageWidth: PropTypes.number,
+  maxImageHeight: PropTypes.number,
+};
+
+export default ImageComponent;

package/src/extensions/image.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/image.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import React from 'react';
+import ImageComponent from './image-component.js';
+
+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"]',
+      },
+    ];
+  },
+
+  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,
+          });
+        },
+    };
+  },
+});

package/src/extensions/index.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import compact from 'lodash-es/compact.js';
+import isEmpty from 'lodash-es/isEmpty.js';
+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),
+  ]);
+};