@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/ImageNodeView.tsx

@@ -6,35 +6,62 @@
  *
  * The ProseMirror node retains the original relative path so markdown roundtrip
  * is preserved — only the rendered DOM uses the resolved URL.
+ *
+ * When the image is hovered or selected, a small floating "Edit" affordance
+ * appears in the top-right corner — clicking it calls `openImageEdit` on the
+ * editor context, which `<EditorShell>` consumes to open a modal
+ * `<ImageEditor>` on the source path. Only shown for paths that are
+ * relative (i.e. live in the document's media container).
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
 import Image from '@tiptap/extension-image';
 import { useEditorContext } from './EditorContext';
+import { normalizeMalformedAssetUrl } from './utils/normalizeMalformedAssetUrl';
 
-function ImageComponent({ node }: NodeViewProps) {
-  const { src, alt, title } = node.attrs as { src: string; alt: string; title: string };
-  const { mediaProvider, imageDisplayMode } = useEditorContext();
+function ImageComponent({ node, selected, editor, updateAttributes }: NodeViewProps) {
+  const { src, alt, title, width } = node.attrs as {
+    src: string;
+    alt: string;
+    title: string;
+    width: number | null;
+    height: number | null;
+  };
+  const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
   const [resolvedSrc, setResolvedSrc] = useState(src);
+  const [hovered, setHovered] = useState(false);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  // Live preview width while a resize gesture is in flight. Null means
+  // "use the persisted width attr". Committed to node attrs on mouseup.
+  const [previewWidth, setPreviewWidth] = useState<number | null>(null);
   const isThumbnail = imageDisplayMode === 'thumbnail';
+  const isEditable = editor?.isEditable ?? true;
 
+  // MS "Save Page As Web Page" / pandoc-style imports sometimes leave
+  // image srcs in the shape `http://<doc>_files/<asset>` — the asset
+  // folder got URL-parsed as a hostname because no scheme separator was
+  // ever there. Detect that shape (bare hostname, no dots/ports, ending
+  // in `_files`) and recover the original relative path so the media
+  // provider can resolve it from the workspace.
+  const normalizedRelativePath = normalizeMalformedAssetUrl(src);
   const isRelative =
     src &&
     !src.startsWith('blob:') &&
     !src.startsWith('http') &&
     !src.startsWith('data:') &&
     !src.startsWith('/');
+  const resolveAs = normalizedRelativePath ?? (isRelative ? src : null);
 
   useEffect(() => {
-    if (!mediaProvider || !isRelative) {
+    if (!mediaProvider || !resolveAs) {
       setResolvedSrc(src);
       return;
     }
 
     let cancelled = false;
-    mediaProvider.resolveUrl(src).then(
+    mediaProvider.resolveUrl(resolveAs).then(
       (resolved) => {
         if (!cancelled) setResolvedSrc(resolved);
       },
@@ -46,37 +73,211 @@ function ImageComponent({ node }: NodeViewProps) {
     return () => {
       cancelled = true;
     };
-  }, [src, mediaProvider, isRelative]);
+    // `mediaRevision` is bumped after the image editor writes back to the
+    // same path — re-resolve so we pick up the fresh blob URL.
+  }, [src, resolveAs, mediaProvider, mediaRevision]);
+
+  // The Edit affordance is only meaningful when:
+  //  - the editor is editable (read-only previews skip it),
+  //  - the path is relative (lives in the doc's container, so the editor
+  //    can read+write it back), and
+  //  - a media provider is wired (the modal resolves the URL through it).
+  const canEdit = isEditable && isRelative && mediaProvider !== null;
+  const showAffordance = canEdit && (selected || hovered);
+  // Resize handle is shown for any selected image in an editable view —
+  // even non-relative ones (external URLs, data URIs) — so authors can
+  // size remote pictures the same way as local ones.
+  const canResize = isEditable && !isThumbnail;
+  const showResize = canResize && (selected || hovered);
+
+  // Effective render width: live preview while dragging, otherwise the
+  // persisted attr. Height is always derived from the natural aspect
+  // ratio of the image element so authors can't accidentally squash it.
+  const effectiveWidth = previewWidth ?? width ?? null;
+
+  const beginResize = (event: React.MouseEvent) => {
+    if (!canResize) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const imgEl = imgRef.current;
+    if (!imgEl) return;
+    const startWidth = imgEl.getBoundingClientRect().width;
+    const startX = event.clientX;
+    // Cap at the image's natural width so dragging out doesn't upscale
+    // past the source pixels (which just looks blurry).
+    const maxWidth = imgEl.naturalWidth || Infinity;
+    const minWidth = 24;
+
+    const onMove = (e: MouseEvent) => {
+      const next = Math.max(minWidth, Math.min(maxWidth, startWidth + (e.clientX - startX)));
+      setPreviewWidth(Math.round(next));
+    };
+    const onUp = (e: MouseEvent) => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      const finalWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + (e.clientX - startX)));
+      const naturalW = imgEl.naturalWidth;
+      const naturalH = imgEl.naturalHeight;
+      const w = Math.round(finalWidth);
+      const h = naturalW > 0 && naturalH > 0 ? Math.round((w * naturalH) / naturalW) : null;
+      setPreviewWidth(null);
+      updateAttributes({ width: w, height: h });
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  const resetSize = (event: React.MouseEvent) => {
+    if (!canResize) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setPreviewWidth(null);
+    updateAttributes({ width: null, height: null });
+  };
+
+  const baseStyle: React.CSSProperties = isThumbnail
+    ? {
+        maxWidth: '100px',
+        maxHeight: '100px',
+        width: 'auto',
+        height: 'auto',
+        objectFit: 'contain',
+        display: 'block',
+      }
+    : effectiveWidth
+      ? {
+          width: `${effectiveWidth}px`,
+          maxWidth: '100%',
+          height: 'auto',
+          display: 'block',
+        }
+      : { maxWidth: '100%', height: 'auto', display: 'block' };
 
   return (
-    <NodeViewWrapper as="figure" style={{ margin: '0.5em 0' }}>
+    <NodeViewWrapper
+      as="figure"
+      // `data-drag-handle` tells ProseMirror that drags starting on this
+      // wrapper are NODE moves (not OS-level image drags). Without it,
+      // grabbing the inner `<img>` fires the browser's default image-drag
+      // behaviour: the picture is packaged as a virtual file in
+      // `dataTransfer.files`, the drop is treated as an external upload,
+      // and the source node is never removed — producing a duplicate.
+      // Combined with `draggable: true` in the node spec, this gives
+      // ProseMirror's default dropHandler a real internal move which
+      // preserves the `width`/`height` attrs and deletes the original.
+      draggable
+      data-drag-handle
+      style={{ margin: '0.5em 0', position: 'relative', display: 'inline-block', maxWidth: '100%' }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <img
+        ref={imgRef}
         src={resolvedSrc}
         alt={alt || ''}
         title={title || undefined}
         className={isThumbnail ? 'squisq-image squisq-image--thumbnail' : 'squisq-image'}
-        style={
-          isThumbnail
-            ? {
-                maxWidth: '100px',
-                maxHeight: '100px',
-                width: 'auto',
-                height: 'auto',
-                objectFit: 'contain',
-                display: 'block',
-              }
-            : { maxWidth: '100%', height: 'auto', display: 'block' }
-        }
+        style={baseStyle}
+        // Disable the inner `<img>`'s native HTML5 drag so the gesture is
+        // captured by the wrapper's `data-drag-handle` instead. (Without
+        // this the browser still emits its own dragstart on the image
+        // and ProseMirror sees an external file drop.)
+        draggable={false}
+        onDragStart={(e) => e.preventDefault()}
+        data-selected={selected ? 'true' : undefined}
       />
+      {showAffordance && (
+        <button
+          type="button"
+          className="squisq-image-edit-affordance"
+          data-testid="image-edit-affordance"
+          // Stop the click from re-selecting the ProseMirror node and from
+          // bubbling to host handlers like file-drop overlays.
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openImageEdit(src);
+          }}
+          title="Edit image"
+          aria-label={`Edit image ${alt || src}`}
+        >
+          <span aria-hidden="true" style={{ fontSize: '0.95em', lineHeight: 1 }}>
+            ✎
+          </span>
+          <span>Edit</span>
+        </button>
+      )}
+      {showResize && (
+        <>
+          <span
+            className="squisq-image-resize-handle"
+            data-testid="image-resize-handle"
+            onMouseDown={beginResize}
+            // Double-click clears the persisted width/height so the image
+            // returns to its natural rendered size.
+            onDoubleClick={resetSize}
+            title="Drag to resize · double-click to reset"
+            aria-label="Resize image"
+            role="separator"
+          />
+          {(previewWidth != null || width != null) && (
+            <span className="squisq-image-resize-readout" aria-hidden="true">
+              {Math.round(effectiveWidth ?? 0)}px
+            </span>
+          )}
+        </>
+      )}
     </NodeViewWrapper>
   );
 }
 
 /**
  * Image extension with a custom React NodeView that resolves URLs
- * through the EditorContext's MediaProvider.
+ * through the EditorContext's MediaProvider, plus author-controlled
+ * width/height attributes for in-editor resizing.
+ *
+ * When `width` (and optionally `height`) is set, the markdown serializer
+ * (`tiptapToMarkdown` in `tiptapBridge.ts`) emits an HTML `<img>` tag
+ * rather than the `![alt](src)` shorthand so dimensions survive a
+ * markdown ↔ WYSIWYG round-trip.
  */
 export const ImageWithMediaProvider = Image.extend({
+  // Mark the node draggable so ProseMirror handles drag-to-reposition
+  // as an internal node move (preserves `width`/`height` attrs and
+  // removes the source node automatically). Combined with the
+  // `data-drag-handle` on the NodeViewWrapper, this is what makes the
+  // `moved` flag true in `handleDrop` so the editor's file-upload path
+  // doesn't fire on a drag-reorder.
+  draggable: true,
+  addAttributes() {
+    const parent = this.parent?.() ?? {};
+    return {
+      ...parent,
+      width: {
+        default: null,
+        parseHTML: (element) => {
+          const raw = element.getAttribute('width');
+          if (!raw) return null;
+          const n = parseInt(raw, 10);
+          return Number.isFinite(n) && n > 0 ? n : null;
+        },
+        renderHTML: (attrs: { width?: number | null }) =>
+          attrs.width ? { width: String(attrs.width) } : {},
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => {
+          const raw = element.getAttribute('height');
+          if (!raw) return null;
+          const n = parseInt(raw, 10);
+          return Number.isFinite(n) && n > 0 ? n : null;
+        },
+        renderHTML: (attrs: { height?: number | null }) =>
+          attrs.height ? { height: String(attrs.height) } : {},
+      },
+    };
+  },
   addNodeView() {
     return ReactNodeViewRenderer(ImageComponent);
   },

package/src/ImageViewer.tsx

@@ -0,0 +1,221 @@
+/**
+ * ImageViewer
+ *
+ * Read-only image viewer used when EditorShell runs in `image` file mode
+ * (PNG/JPEG/etc.). Renders a centered image that fits its container with
+ * a small overlay toolbar for fit / 100% / zoom in / zoom out, and a
+ * status row showing intrinsic dimensions and current zoom.
+ *
+ * Lifecycle of the `src` URL is the caller's responsibility — when fed a
+ * blob URL, the host should `URL.revokeObjectURL` on unmount or src change.
+ *
+ * Future image-editing actions (rotate, flip, crop) will slot in alongside
+ * the existing zoom controls.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+
+export interface ImageViewerProps {
+  /** Image source — typically a blob: URL the host owns and revokes. */
+  src: string;
+  /** Alt text for accessibility. Defaults to empty string (decorative). */
+  alt?: string;
+  /** Additional class name on the outer container. */
+  className?: string;
+  /** Color theme for the chrome around the image. */
+  theme?: 'light' | 'dark';
+}
+
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 16;
+const ZOOM_STEP = 1.25;
+
+type FitState = { mode: 'fit' } | { mode: 'manual'; zoom: number };
+
+export function ImageViewer({ src, alt = '', className, theme = 'light' }: ImageViewerProps) {
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const stageRef = useRef<HTMLDivElement | null>(null);
+
+  const [naturalSize, setNaturalSize] = useState<{ w: number; h: number } | null>(null);
+  const [fitZoom, setFitZoom] = useState<number>(1);
+  const [state, setState] = useState<FitState>({ mode: 'fit' });
+  const [pan, setPan] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setNaturalSize(null);
+    setState({ mode: 'fit' });
+    setPan({ x: 0, y: 0 });
+    setError(null);
+  }, [src]);
+
+  const recomputeFitZoom = useCallback(() => {
+    const stage = stageRef.current;
+    if (!stage || !naturalSize) return;
+    const { clientWidth, clientHeight } = stage;
+    if (clientWidth === 0 || clientHeight === 0) return;
+    const fit = Math.min(clientWidth / naturalSize.w, clientHeight / naturalSize.h, 1);
+    setFitZoom(fit > 0 ? fit : 1);
+  }, [naturalSize]);
+
+  useEffect(() => {
+    recomputeFitZoom();
+    if (typeof ResizeObserver === 'undefined') return;
+    const stage = stageRef.current;
+    if (!stage) return;
+    const ro = new ResizeObserver(() => recomputeFitZoom());
+    ro.observe(stage);
+    return () => ro.disconnect();
+  }, [recomputeFitZoom]);
+
+  const handleLoad = useCallback(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+  }, []);
+
+  const handleError = useCallback(() => {
+    setError('Failed to load image');
+  }, []);
+
+  const effectiveZoom = state.mode === 'fit' ? fitZoom : state.zoom;
+
+  const setZoom = useCallback((next: number) => {
+    const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, next));
+    setState({ mode: 'manual', zoom: clamped });
+  }, []);
+
+  const onFit = useCallback(() => {
+    setState({ mode: 'fit' });
+    setPan({ x: 0, y: 0 });
+  }, []);
+  const onActual = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [setZoom]);
+  const onZoomIn = useCallback(() => setZoom(effectiveZoom * ZOOM_STEP), [effectiveZoom, setZoom]);
+  const onZoomOut = useCallback(() => setZoom(effectiveZoom / ZOOM_STEP), [effectiveZoom, setZoom]);
+
+  const dragRef = useRef<{ startX: number; startY: number; panX: number; panY: number } | null>(
+    null,
+  );
+  const onMouseDown = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      if (effectiveZoom <= fitZoom) return;
+      dragRef.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
+      e.preventDefault();
+    },
+    [effectiveZoom, fitZoom, pan.x, pan.y],
+  );
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setPan({
+        x: drag.panX + (e.clientX - drag.startX),
+        y: drag.panY + (e.clientY - drag.startY),
+      });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, []);
+
+  const isPannable = effectiveZoom > fitZoom + 1e-6;
+
+  const imgStyle: CSSProperties = naturalSize
+    ? {
+        width: `${naturalSize.w * effectiveZoom}px`,
+        height: `${naturalSize.h * effectiveZoom}px`,
+        transform: `translate(${pan.x}px, ${pan.y}px)`,
+      }
+    : { maxWidth: '100%', maxHeight: '100%' };
+
+  const containerCls = ['squisq-image-viewer', `squisq-image-viewer--${theme}`, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={containerCls} data-testid="image-viewer">
+      <div
+        ref={stageRef}
+        className="squisq-image-viewer-stage"
+        onMouseDown={onMouseDown}
+        style={{ cursor: isPannable ? (dragRef.current ? 'grabbing' : 'grab') : 'default' }}
+      >
+        {/* future: rotate, flip, crop overlays go here */}
+        {error ? (
+          <div className="squisq-image-viewer-error">{error}</div>
+        ) : (
+          <img
+            ref={imgRef}
+            src={src}
+            alt={alt}
+            className="squisq-image-viewer-img"
+            style={imgStyle}
+            onLoad={handleLoad}
+            onError={handleError}
+            draggable={false}
+          />
+        )}
+        <div className="squisq-image-viewer-toolbar">
+          <button
+            type="button"
+            className="squisq-image-viewer-btn"
+            onClick={onZoomOut}
+            aria-label="Zoom out"
+            title="Zoom out"
+          >
+            −
+          </button>
+          <button
+            type="button"
+            className="squisq-image-viewer-btn"
+            onClick={onFit}
+            aria-pressed={state.mode === 'fit'}
+            title="Fit to viewport"
+          >
+            Fit
+          </button>
+          <button
+            type="button"
+            className="squisq-image-viewer-btn"
+            onClick={onActual}
+            title="Actual size (100%)"
+          >
+            100%
+          </button>
+          <button
+            type="button"
+            className="squisq-image-viewer-btn"
+            onClick={onZoomIn}
+            aria-label="Zoom in"
+            title="Zoom in"
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <div className="squisq-image-viewer-status">
+        {naturalSize ? (
+          <>
+            <span>
+              {naturalSize.w} × {naturalSize.h}
+            </span>
+            <span>{Math.round(effectiveZoom * 100)}%</span>
+          </>
+        ) : (
+          <span>Loading…</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/InlineIcon.ts

@@ -0,0 +1,84 @@
+/**
+ * InlineIcon — Tiptap Node Extension
+ *
+ * Atomic inline node that round-trips FontAwesome icons through the
+ * WYSIWYG editor. The markdown bridge stashes `{[github]}` source as
+ * `<i data-icon="github" data-family="brands" data-name="github"
+ * class="fa-brands fa-github"></i>`; this extension lets ProseMirror
+ * recognize that markup, persist the attributes through edits, and
+ * re-emit it when serializing back to HTML/markdown.
+ *
+ * Atom / inline / non-selectable means the icon behaves like an emoji:
+ * the caret can land before or after it, Backspace deletes it whole,
+ * and Tiptap won't try to put content inside it.
+ */
+
+import { Node, mergeAttributes } from '@tiptap/core';
+
+interface InlineIconAttrs {
+  /** Token as authored in markdown — e.g. `github`, `fa-solid:user`. */
+  token: string;
+  family: 'brands' | 'solid' | 'regular';
+  name: string;
+}
+
+export const InlineIcon = Node.create({
+  name: 'inlineIcon',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes() {
+    return {
+      token: {
+        default: '',
+        parseHTML: (el: HTMLElement) => el.getAttribute('data-icon') ?? '',
+        renderHTML: (attrs: InlineIconAttrs) => (attrs.token ? { 'data-icon': attrs.token } : {}),
+      },
+      family: {
+        default: 'solid',
+        parseHTML: (el: HTMLElement) => el.getAttribute('data-family') ?? 'solid',
+        renderHTML: (attrs: InlineIconAttrs) =>
+          attrs.family ? { 'data-family': attrs.family } : {},
+      },
+      name: {
+        default: '',
+        parseHTML: (el: HTMLElement) => el.getAttribute('data-name') ?? '',
+        renderHTML: (attrs: InlineIconAttrs) => (attrs.name ? { 'data-name': attrs.name } : {}),
+      },
+    };
+  },
+
+  parseHTML() {
+    // Tiptap's built-in Italic mark also claims `<i>` tags. We need a
+    // higher priority than the default (50) so ProseMirror picks
+    // InlineIcon over Italic for `<i data-icon=…>` markup — otherwise
+    // the markdown → WYSIWYG round-trip silently drops the icon and
+    // produces an empty italic mark instead.
+    return [
+      {
+        tag: 'i[data-icon]',
+        priority: 100,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const family = (HTMLAttributes['data-family'] as string | undefined) ?? 'solid';
+    const name = (HTMLAttributes['data-name'] as string | undefined) ?? '';
+    // The `<i>` carries `class="fa-brands fa-github"` so the bundled
+    // FontAwesome CSS picks it up. We also keep `data-*` mirrors so
+    // the bridge regex can round-trip back to markdown without
+    // parsing the class string.
+    const className = name ? `fa-${family} fa-${name}` : '';
+    return [
+      'i',
+      mergeAttributes(HTMLAttributes, {
+        class: className,
+        contenteditable: 'false',
+      }),
+    ];
+  },
+});