Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-13 05:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: image selected and hover states

Browse Source
This commit is contained in:
Aaryan Khandelwal
2024-09-13 15:12:10 +05:30
parent 47cf78e4f6
commit 2583038b0a
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/editor/src/core/extensions/custom-image-component/components/image-block-view.tsx
View File

@@ -2,6 +2,9 @@ import React, { useRef, useState, useCallback, useLayoutEffect } from "react";
import { Node as ProsemirrorNode } from "@tiptap/pm/model";
import { NodeSelection } from "@tiptap/pm/state";
import { Editor } from "@tiptap/react";
// helpers
import { cn } from "@/helpers/common";
// components
import { ImageShimmer } from "./image-loader";
interface ImageBlockViewProps {
@@ -101,31 +104,33 @@ export const ImageComponent: React.FC<ImageBlockViewProps> = (props) => {
return (
<div
ref={containerRef}
className="relative inline-block"
className="group/image-component relative inline-block max-w-full"
onMouseDown={handleMouseDown}
style={{ width: size.width, height: size.height }}
style={{
width: size.width,
height: size.height,
}}
>
{isLoading && <ImageShimmer width={size.width} height={size.height} />}
<img
ref={imageRef}
src={src}
alt=""
className="max-w-full h-auto object-contain rounded-md"
className={cn("block rounded-md", {
hidden: isLoading,
})}
style={{
display: isLoading ? "none" : "block",
width: size.width,
height: size.height,
}}
/>
{selected && (
<>
<div className="absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md" />
<div
className="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white cursor-nwse-resize"
onMouseDown={handleResizeStart}
/>
</>
)}
{selected && <div className="absolute inset-0 size-full bg-custom-primary-500/30" />}
<>
<div className="opacity-0 group-hover/image-component:opacity-100 absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out" />
<div
className="opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white cursor-nwse-resize transition-opacity duration-100 ease-in-out"
onMouseDown={handleResizeStart}
/>
</>
</div>
);
};