feat: feedback (#156)

* minimal tiptap

* wip

* img edit block

* wip

* fix

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

@@ -0,0 +1,45 @@
+import { isNumber, NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import { useMemo } from '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 = 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/components/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/components/minimal-tiptap/extensions/image/index.ts

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