Move to TanStack Start from Next.js (#184)

web/shared/minimal-tiptap/extensions/image/components/image-view-block.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { isNumber, NodeViewProps, NodeViewWrapper } from "@tiptap/react"
+import { useImageLoad } from "../../../hooks/use-image-load"
+import { cn } from "@/lib/utils"
+
+const ImageViewBlock = ({ editor, node, getPos }: NodeViewProps) => {
+  const imgSize = useImageLoad(node.attrs.src)
+
+  const paddingBottom = React.useMemo(() => {
+    if (!imgSize.width || !imgSize.height) {
+      return 0
+    }
+
+    return (imgSize.height / imgSize.width) * 100
+  }, [imgSize.width, imgSize.height])
+
+  return (
+    <NodeViewWrapper>
+      <div draggable data-drag-handle>
+        <figure>
+          <div
+            className="relative w-full"
+            style={{
+              paddingBottom: `${isNumber(paddingBottom) ? paddingBottom : 0}%`,
+            }}
+          >
+            <div className="absolute h-full w-full">
+              <div
+                className={cn(
+                  "relative h-full max-h-full w-full max-w-full rounded transition-all",
+                )}
+                style={{
+                  boxShadow:
+                    editor.state.selection.from === getPos()
+                      ? "0 0 0 1px hsl(var(--primary))"
+                      : "none",
+                }}
+              >
+                <div className="relative flex h-full max-h-full w-full max-w-full overflow-hidden">
+                  <img
+                    alt={node.attrs.alt}
+                    src={node.attrs.src}
+                    className="absolute left-2/4 top-2/4 m-0 h-full max-w-full -translate-x-2/4 -translate-y-2/4 transform object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </figure>
+      </div>
+    </NodeViewWrapper>
+  )
+}
+
+export { ImageViewBlock }

web/shared/minimal-tiptap/extensions/image/image.ts

@@ -0,0 +1,9 @@
+import { Image as TiptapImage } from "@tiptap/extension-image"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { ImageViewBlock } from "./components/image-view-block"
+
+export const Image = TiptapImage.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageViewBlock)
+  },
+})

web/shared/minimal-tiptap/extensions/image/index.ts

@@ -0,0 +1 @@
+export * from "./image"