diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx index 79b88ce7..71660dbf 100644 --- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx @@ -10,8 +10,9 @@ import { import { blobRefToSrc } from "src/utils/blobRefToSrc"; import { TextBlock } from "./TextBlock"; import { Popover } from "components/Popover"; -import { ImageAltSmall } from "components/Toolbar/ImageToolbar"; import { theme } from "tailwind.config"; +import { ServerSafePopover } from "./ServerSafePopover"; +import { ImageAltSmall } from "components/Icons/ImageAlt"; export function PostContent({ blocks, @@ -125,7 +126,7 @@ let Block = ({ /> {b.block.alt && (
- } @@ -133,7 +134,7 @@ let Block = ({
{b.block.alt}
- +
)} diff --git a/app/lish/[did]/[publication]/[rkey]/ServerSafePopover.tsx b/app/lish/[did]/[publication]/[rkey]/ServerSafePopover.tsx new file mode 100644 index 00000000..5a2eec8d --- /dev/null +++ b/app/lish/[did]/[publication]/[rkey]/ServerSafePopover.tsx @@ -0,0 +1,19 @@ +import { Popover } from "components/Popover"; + +export const ServerSafePopover = (props: { + trigger: React.ReactNode; + disabled?: boolean; + children: React.ReactNode; + align?: "start" | "end" | "center"; + side?: "top" | "bottom" | "left" | "right"; + background?: string; + border?: string; + className?: string; + open?: boolean; + onOpenChange?: (open: boolean) => void; + asChild?: boolean; + arrowFill?: string; +}) => { + if (typeof window === "undefined") return props.trigger; + return ; +}; diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx index c7bb9d8f..ac41a101 100644 --- a/components/Blocks/ImageBlock.tsx +++ b/components/Blocks/ImageBlock.tsx @@ -12,11 +12,11 @@ import { elementId } from "src/utils/elementId"; import { createContext, useContext, useEffect, useState } from "react"; import { BlockImageSmall } from "components/Icons/BlockImageSmall"; import { Popover } from "components/Popover"; -import { ImageAltSmall } from "components/Toolbar/ImageToolbar"; import { theme } from "tailwind.config"; import { EditTiny } from "components/Icons/EditTiny"; import { AsyncValueAutosizeTextarea } from "components/utils/AutosizeTextarea"; import { set } from "colorjs.io/fn"; +import { ImageAltSmall } from "components/Icons/ImageAlt"; export function ImageBlock(props: BlockProps & { preview?: boolean }) { let { rep } = useReplicache(); diff --git a/components/Icons/ImageAlt.tsx b/components/Icons/ImageAlt.tsx new file mode 100644 index 00000000..76e44f0e --- /dev/null +++ b/components/Icons/ImageAlt.tsx @@ -0,0 +1,41 @@ +export const ImageAltSmall = (props: { fillColor: string }) => { + return ( + + + + + ); +}; + +export const ImageRemoveAltSmall = () => { + return ( + + + + ); +}; diff --git a/components/Toolbar/ImageToolbar.tsx b/components/Toolbar/ImageToolbar.tsx index fe95dc8c..a8c40730 100644 --- a/components/Toolbar/ImageToolbar.tsx +++ b/components/Toolbar/ImageToolbar.tsx @@ -3,9 +3,7 @@ import { ToolbarButton } from "."; import { useEntity, useReplicache } from "src/replicache"; import { useUIState } from "src/useUIState"; import { Props } from "components/Icons/Props"; -import { useContext, useEffect } from "react"; -import { ImageBlockContext } from "components/Blocks/ImageBlock"; -import { set } from "colorjs.io/fn"; +import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt"; export const ImageFullBleedButton = (props: {}) => { let { rep } = useReplicache(); @@ -120,45 +118,3 @@ const ImageFullBleedOnSmall = (props: Props) => { ); }; - -export const ImageAltSmall = (props: { fillColor: string }) => { - return ( - - - - - ); -}; - -const ImageRemoveAltSmall = () => { - return ( - - - - ); -};