From 2b596a0b60127c962e8a10cd1c981f392197b357 Mon Sep 17 00:00:00 2001 From: celine Date: Wed, 14 Jan 2026 22:50:52 -0500 Subject: [PATCH] change blockToolbar to imageToolbar, not --- .claude/settings.local.json | 9 ++ components/Blocks/ImageBlock.tsx | 2 +- components/Toolbar/BlockToolbar.1.tsx | 0 components/Toolbar/BlockToolbar.tsx | 139 ++-------------------- components/Toolbar/ImageToolbar.tsx | 8 +- components/Toolbar/MultiSelectToolbar.tsx | 36 ++++-- components/Toolbar/index.tsx | 110 +++++++---------- 7 files changed, 98 insertions(+), 206 deletions(-) create mode 100644 .claude/settings.local.json delete mode 100644 components/Toolbar/BlockToolbar.1.tsx diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 00000000..8f66d8d3 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "mcp__acp__Edit", + "mcp__acp__Write", + "mcp__acp__Bash" + ] + } +} diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx index f3c457ec..bd2bdad8 100644 --- a/components/Blocks/ImageBlock.tsx +++ b/components/Blocks/ImageBlock.tsx @@ -147,7 +147,7 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) { hasAlignment isSelected={!!isSelected} className={blockClassName} - optionsClassName="top-[-8px]!" + optionsClassName={isFullBleed ? "top-[-8px]!" : ""} > {isLocalUpload || image.data.local ? ( void; +export const ImageToolbar = (props: { + setToolbarState: (state: "image" | "text-alignment") => void; }) => { let focusedEntity = useUIState((s) => s.focusedEntity); let focusedEntityType = useEntity( @@ -34,125 +26,14 @@ export const BlockToolbar = (props: { return (
- { - props.setToolbarState("areYouSure"); - }} - tooltipContent="Delete Block" - > - - - - - {blockType === "image" && ( - <> - - - - - {focusedEntityType?.data.value !== "canvas" && ( - - )} - + + + + + {focusedEntityType?.data.value !== "canvas" && ( + )} - {(blockType === "button" || blockType === "datetime") && ( - <> - - {focusedEntityType?.data.value !== "canvas" && ( - - )} - - )} - -
); }; - -const MoveBlockButtons = () => { - let { rep } = useReplicache(); - let entity_set = useEntitySetContext(); - return ( - <> - { - if (!rep) return; - await moveBlockUp(rep); - }} - tooltipContent={ -
-
Move Up
-
- Shift +{" "} - {metaKey()} +{" "} - ↑ -
-
- } - > - - - - { - if (!rep) return; - await moveBlockDown(rep, entity_set.set); - }} - tooltipContent={ -
-
Move Down
-
- Shift +{" "} - {metaKey()} +{" "} - ↓ -
-
- } - > - - - - - ); -}; - -const MoveBlockDown = () => { - return ( - - - - ); -}; - -const MoveBlockUp = () => { - return ( - - - - ); -}; diff --git a/components/Toolbar/ImageToolbar.tsx b/components/Toolbar/ImageToolbar.tsx index ebb9010e..7016ffa2 100644 --- a/components/Toolbar/ImageToolbar.tsx +++ b/components/Toolbar/ImageToolbar.tsx @@ -36,9 +36,7 @@ export const ImageFullBleedButton = (props: {}) => { ); }; -export const ImageAltTextButton = (props: { - setToolbarState: (s: "img-alt-text") => void; -}) => { +export const ImageAltTextButton = (props: {}) => { let { rep } = useReplicache(); let focusedBlock = useUIState((s) => s.focusedEntity)?.entityID || null; @@ -48,14 +46,14 @@ export const ImageAltTextButton = (props: { let altEditorOpen = useUIState((s) => s.openPopover === focusedBlock); let hasSrc = useEntity(focusedBlock, "block/image")?.data; if (!hasSrc) return null; - + console.log("alt: " + altText); return ( { e.preventDefault(); if (!focusedBlock) return; - if (!altText) { + if (altText === undefined) { await rep?.mutate.assertFact({ entity: focusedBlock, attribute: "image/alt", diff --git a/components/Toolbar/MultiSelectToolbar.tsx b/components/Toolbar/MultiSelectToolbar.tsx index c2cbb167..affb41d2 100644 --- a/components/Toolbar/MultiSelectToolbar.tsx +++ b/components/Toolbar/MultiSelectToolbar.tsx @@ -2,25 +2,26 @@ import { useUIState } from "src/useUIState"; import { ReplicacheMutators, useReplicache } from "src/replicache"; import { ToolbarButton } from "./index"; import { copySelection } from "src/utils/copySelection"; -import { useSmoker } from "components/Toast"; +import { useSmoker, useToaster } from "components/Toast"; import { getBlocksWithType } from "src/hooks/queries/useBlocks"; import { Replicache } from "replicache"; import { LockBlockButton } from "./LockBlockButton"; import { Props } from "components/Icons/Props"; import { TextAlignmentButton } from "./TextAlignmentToolbar"; import { getSortedSelection } from "components/SelectionManager/selectionState"; +import { deleteBlock } from "src/utils/deleteBlock"; +import { ShortcutKey } from "components/Layout"; export const MultiselectToolbar = (props: { - setToolbarState: ( - state: "areYouSure" | "multiselect" | "text-alignment", - ) => void; + setToolbarState: (state: "multiselect" | "text-alignment") => void; }) => { const { rep } = useReplicache(); const smoker = useSmoker(); + const toaster = useToaster(); const handleCopy = async (event: React.MouseEvent) => { if (!rep) return; - const [sortedSelection] = await getSortedSelection(rep); + let [sortedSelection] = await getSortedSelection(rep); await copySelection(rep, sortedSelection); smoker({ position: { x: event.clientX, y: event.clientY }, @@ -33,8 +34,29 @@ export const MultiselectToolbar = (props: {
{ - props.setToolbarState("areYouSure"); + onClick={async (e) => { + e.stopPropagation(); + if (!rep) return; + let [sortedSelection] = await getSortedSelection(rep); + await deleteBlock( + sortedSelection.map((b) => b.value), + rep, + ); + + toaster({ + content: ( +
+ {sortedSelection.length} block + {sortedSelection.length === 1 ? "" : "s"} deleted!{" "} + + Ctrl + Z{" "} + + to undo. +
+ ), + type: "success", + }); }} > diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx index e26d1e1d..f8d764fd 100644 --- a/components/Toolbar/index.tsx +++ b/components/Toolbar/index.tsx @@ -11,7 +11,7 @@ import { addShortcut } from "src/shortcuts"; import { ListToolbar } from "./ListToolbar"; import { HighlightToolbar } from "./HighlightToolbar"; import { TextToolbar } from "./TextToolbar"; -import { BlockToolbar } from "./BlockToolbar"; +import { ImageToolbar } from "./BlockToolbar"; import { MultiselectToolbar } from "./MultiSelectToolbar"; import { AreYouSure } from "components/Blocks/DeleteBlock"; import { deleteBlock } from "src/utils/deleteBlock"; @@ -21,9 +21,7 @@ import { useIsMobile } from "src/hooks/isMobile"; import { CloseTiny } from "components/Icons/CloseTiny"; export type ToolbarTypes = - | "areYouSure" | "default" - | "block" | "multiselect" | "highlight" | "link" @@ -31,7 +29,8 @@ export type ToolbarTypes = | "text-alignment" | "list" | "linkBlock" - | "img-alt-text"; + | "img-alt-text" + | "image"; export const Toolbar = (props: { pageID: string; blockID: string }) => { let { rep } = useReplicache(); @@ -64,17 +63,21 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => { }; }, [toolbarState]); + let isTextBlock = + blockType === "heading" || + blockType === "text" || + blockType === "blockquote"; + useEffect(() => { - if (!blockType) return; - if ( - blockType !== "heading" && - blockType !== "text" && - blockType !== "blockquote" - ) { - setToolbarState("block"); - } else { + if (isTextBlock) { setToolbarState("default"); } + if (blockType === "image") { + setToolbarState("image"); + } + if (blockType === "button" || blockType === "datetime") { + setToolbarState("text-alignment"); + } else return; }, [blockType]); useEffect(() => { @@ -125,64 +128,43 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => { setToolbarState("default")} /> ) : toolbarState === "text-alignment" ? ( - ) : toolbarState === "block" ? ( - + ) : toolbarState === "image" ? ( + ) : toolbarState === "multiselect" ? ( - ) : toolbarState === "areYouSure" ? ( - b.value)} - onClick={() => { - rep && - deleteBlock( - selectedBlocks.map((b) => b.value), - rep, - ); - }} - closeAreYouSure={() => { - setToolbarState( - selectedBlocks.length > 1 - ? "multiselect" - : blockType !== "heading" && blockType !== "text" - ? "block" - : "default", - ); - }} - /> ) : null}
{/* if the thing is are you sure state, don't show the x... is each thing handling its own are you sure? theres no need for that */} - {toolbarState !== "areYouSure" && ( - - )} + } + }} + > + + ); -- 2.51.2