Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
10 kB · 115 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116import { useUIState } from "src/useUIState";import { ReplicacheMutators, useReplicache } from "src/replicache";import { ToolbarButton } from "./index";import { copySelection } from "src/utils/copySelection";import { useSmoker, useToaster } from "components/Toast";
import { Props } from "components/Icons/Props";import { TextAlignmentButton } from "./TextAlignmentToolbar";import { getSortedSelection } from "components/SelectionManager/selectionState";import { deleteBlock } from "src/utils/deleteBlock";import { Separator, ShortcutKey } from "components/Layout";
export const MultiselectToolbar = (props: { setToolbarState: (state: "multiselect" | "text-alignment") => void;}) => { const { rep, undoManager } = useReplicache(); const smoker = useSmoker(); const toaster = useToaster();
const handleCopy = async (event: React.MouseEvent) => { if (!rep) return; let [sortedSelection] = await getSortedSelection(rep); await copySelection(rep, sortedSelection); smoker({ position: { x: event.clientX, y: event.clientY }, text: "Copied to clipboard", }); };
return ( <div className="flex items-center gap-2 justify-between w-full"> <div className="flex items-center gap-2"> <ToolbarButton tooltipContent="Delete Selected Blocks" onClick={async (e) => { e.stopPropagation(); if (!rep) return; let [sortedSelection] = await getSortedSelection(rep); await deleteBlock( sortedSelection.map((b) => b.value), rep, undoManager, );
toaster({ content: ( <div className="font-bold items-center flex"> {sortedSelection.length} block {sortedSelection.length === 1 ? "" : "s"} deleted!{" "} <span className="px-2 flex"> <ShortcutKey>Ctrl</ShortcutKey> <ShortcutKey>Z</ShortcutKey>{" "} </span> to undo. </div> ), type: "success", }); }} > <TrashSmall /> </ToolbarButton> <ToolbarButton disabled={false} tooltipContent="Copy Selected Blocks" onClick={handleCopy} > <CopySmall /> </ToolbarButton> <TextAlignmentButton setToolbarState={props.setToolbarState} /> <Separator classname="h-6!" /> </div> </div> );};
const CopySmall = (props: Props) => { return ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M8.03036 3.85044C8.19103 2.68789 9.26372 1.87571 10.4263 2.03638L19.0781 3.23213C20.2406 3.39281 21.0528 4.4655 20.8921 5.62805L19.2931 17.1976C19.1324 18.3602 18.0598 19.1724 16.8972 19.0117L16.8768 19.0089L17.9581 11.1853C18.0399 10.5931 17.8827 9.99263 17.5212 9.51651L14.5554 5.61099C14.1951 5.13664 13.6615 4.82447 13.0715 4.74292L8.00381 4.04252L8.03036 3.85044ZM5.97171 6.80481C6.03787 6.32611 6.47957 5.99168 6.95827 6.05784L12.2718 6.79222C12.4984 6.82354 12.7038 6.94239 12.8439 7.12329L15.5846 10.6629C15.7287 10.849 15.7917 11.0853 15.7595 11.3184L14.5626 19.9785C14.4964 20.4572 14.0547 20.7916 13.576 20.7255L5.09311 19.5531C4.61441 19.4869 4.27998 19.0452 4.34614 18.5665L5.97171 6.80481ZM7.1294 4.81961C5.96685 4.65894 4.89416 5.47112 4.73348 6.63368L3.10791 18.3954C2.94724 19.5579 3.75942 20.6306 4.92198 20.7913L13.4049 21.9637C14.5675 22.1244 15.6402 21.3122 15.8008 20.1496L16.9977 11.4896C17.076 10.9234 16.9229 10.3496 16.5729 9.89767L13.8322 6.35801C13.492 5.91868 12.9933 5.63006 12.4429 5.55399L7.1294 4.81961ZM12.2721 8.02572C12.3193 7.6838 12.0805 7.3683 11.7385 7.32104C11.3966 7.27379 11.0811 7.51266 11.0339 7.85459L10.7715 9.75307C10.6297 10.7789 11.3463 11.7253 12.3721 11.8671L14.455 12.155C14.797 12.2022 15.1125 11.9634 15.1597 11.6214C15.207 11.2795 14.9681 10.964 14.6262 10.9168L12.5433 10.6289C12.2013 10.5816 11.9624 10.2661 12.0097 9.9242L12.2721 8.02572ZM5.99683 14.2097C6.05354 13.7994 6.43214 13.5128 6.84245 13.5695L10.0055 14.0066C10.4158 14.0633 10.7024 14.4419 10.6457 14.8523C10.589 15.2626 10.2104 15.5492 9.80011 15.4925L6.63709 15.0554C6.22678 14.9986 5.94012 14.62 5.99683 14.2097ZM6.47584 16.2222C6.06553 16.1655 5.68693 16.4521 5.63022 16.8624C5.57352 17.2728 5.86017 17.6514 6.27048 17.7081L12.8109 18.612C13.2212 18.6687 13.5998 18.3821 13.6565 17.9717C13.7132 17.5614 13.4266 17.1828 13.0163 17.1261L6.47584 16.2222Z" fill="currentColor" /> </svg> );};
const TrashSmall = (props: Props) => { return ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M10.682 3.11103C9.4724 3.23448 8.89352 3.67017 8.73295 4.09426C8.57457 4.51256 8.71273 5.20871 9.51183 6.08877C9.86249 6.47497 10.3151 6.86398 10.8567 7.2317C11.521 7.68272 12.3093 8.09493 13.1874 8.42742C14.7679 9.02584 16.286 9.23267 17.4457 9.11431C18.6553 8.99087 19.2342 8.55517 19.3948 8.13109C19.5553 7.707 19.4102 6.99716 18.5856 6.10354C17.7951 5.24678 16.5208 4.39634 14.9403 3.79793C13.3598 3.19951 11.8417 2.99268 10.682 3.11103ZM10.5297 1.61879C11.9666 1.47215 13.7204 1.73212 15.4714 2.39511C17.2225 3.0581 18.7086 4.02485 19.6881 5.08636C20.6335 6.11101 21.2677 7.42054 20.7976 8.66223C20.4763 9.51081 19.7476 10.0415 18.8756 10.3377L18.8512 10.5864C18.8085 11.0201 18.7488 11.6195 18.6804 12.2826C18.5439 13.6052 18.3721 15.193 18.2332 16.2206C18.0958 17.2367 17.9216 18.1654 17.782 18.8394C17.7065 19.2037 17.6277 19.5677 17.5385 19.9289C17.3496 20.8304 16.5864 21.4845 15.7038 21.895C14.7878 22.321 13.5933 22.5626 12.2528 22.5626C9.70265 22.5626 7.61297 21.8776 6.98728 20.0005C6.8862 19.6168 6.80407 19.2278 6.72362 18.8394C6.58403 18.1654 6.40982 17.2367 6.27245 16.2206C6.13295 15.1888 5.96088 13.4661 5.82457 12.0139C5.75617 11.2852 5.69637 10.6201 5.65367 10.1372C5.63217 9.89407 5.61097 9.65088 5.58999 9.40767C5.57932 9.28304 5.58998 9.16406 5.60549 9.03837C5.71664 8.13769 6.61126 7.27662 8.06548 6.69616C7.34029 5.75314 6.92513 4.63277 7.33013 3.56312C7.80026 2.32143 9.14275 1.76033 10.5297 1.61879ZM17.1289 10.6396C17.1998 10.6367 17.2702 10.633 17.3398 10.6283C17.2993 11.0382 17.2469 11.56 17.1883 12.1287C17.0517 13.4526 16.882 15.0185 16.7467 16.0196C16.5497 17.4769 16.2709 18.7602 16.145 19.3048C16.121 19.4087 16.0961 19.5125 16.0714 19.6162C16.0259 19.8437 15.774 20.2081 15.0713 20.5349C14.3961 20.8489 13.4274 21.0626 12.2528 21.0626C9.79771 21.0626 8.71725 20.3951 8.41916 19.552C8.39914 19.4697 8.37966 19.3873 8.36059 19.3048C8.31867 19.1234 8.25973 18.86 8.19244 18.5352C8.05767 17.8845 7.89033 16.9916 7.75893 16.0196C7.62416 15.0228 7.45468 13.3299 7.31801 11.8738C7.28819 11.5561 7.26001 11.2505 7.23417 10.9669C7.3779 11.0411 7.52304 11.1123 7.66588 11.1824C7.78804 11.2424 7.90851 11.3016 8.02495 11.361C8.50725 11.6069 9.07475 11.811 9.70356 11.9612C10.4756 12.1457 11.3401 12.249 12.2528 12.249C14.3262 12.249 16.1049 11.5603 17.1289 10.6396ZM13.8382 5.4146C13.6815 5.78286 13.2605 5.9648 12.8828 5.82179C12.4954 5.67512 12.3002 5.24219 12.4469 4.85481C12.5697 4.53047 12.8562 4.18935 13.3052 4.0074C13.7683 3.8197 14.3267 3.83032 14.949 4.06593C15.5712 4.30154 15.9966 4.66339 16.2193 5.11078C16.4352 5.54447 16.4239 5.98976 16.3011 6.31411C16.1544 6.70148 15.7215 6.89661 15.3341 6.74994C14.9564 6.60693 14.7615 6.19178 14.8879 5.81206C14.8869 5.8057 14.8841 5.79446 14.8765 5.77925C14.8604 5.74695 14.7761 5.60439 14.4178 5.46874C14.0596 5.33309 13.9019 5.38404 13.8685 5.39759C13.8528 5.40397 13.8432 5.41054 13.8382 5.4146ZM9.032 12.9912C9.39109 12.9721 9.67224 13.2642 9.69072 13.6111C9.71588 14.0747 9.7415 14.5382 9.76856 15.0016C9.81412 15.782 9.87062 16.6895 9.91555 17.2239C9.98125 18.0053 10.0742 18.693 10.1161 18.9847C10.1701 19.3602 10.074 19.7752 9.6166 19.8464C9.17393 19.9154 8.93368 19.5441 8.87883 19.1625C8.83468 18.8554 8.73864 18.1456 8.66995 17.3287C8.62347 16.7759 8.56612 15.8528 8.52068 15.0745C8.4935 14.609 8.46777 14.1434 8.44249 13.6778C8.42412 13.333 8.67585 13.01 9.032 12.9912ZM16.0647 13.6483C16.083 13.3036 15.8183 13.0094 15.4736 12.9912C15.1289 12.9729 14.8347 13.238 14.8164 13.5827L14.8164 13.584C14.7907 14.0566 14.7647 14.5292 14.7371 15.0016C14.6915 15.782 14.635 16.6895 14.5901 17.2239C14.5463 17.7451 14.4905 18.2237 14.4456 18.5723C14.4215 18.7593 14.3965 18.9464 14.3676 19.1328C14.3145 19.4738 14.548 19.7933 14.889 19.8464C15.2301 19.8995 15.5496 19.666 15.6027 19.325L15.6029 19.324C15.6333 19.1271 15.6599 18.9296 15.6853 18.732C15.7318 18.3708 15.7899 17.8731 15.8357 17.3287C15.8822 16.7759 15.9395 15.8528 15.9849 15.0745C16.0127 14.5998 16.0389 14.1251 16.0646 13.6503L16.0647 13.6483ZM12.9954 14.4678C12.9954 14.1226 12.7156 13.8428 12.3704 13.8428C12.0253 13.8428 11.7454 14.1226 11.7454 14.4678L11.7454 19.3657C11.7454 19.7109 12.0253 19.9907 12.3704 19.9907C12.7156 19.9907 12.9954 19.7109 12.9954 19.3657L12.9954 14.4678ZM8.34005 10.25C8.61619 10.25 8.84005 10.0261 8.84005 9.75C8.84005 9.47386 8.61619 9.25 8.34005 9.25C8.06391 9.25 7.84005 9.47386 7.84005 9.75C7.84005 10.0261 8.06391 10.25 8.34005 10.25ZM8.34005 10.75C8.89233 10.75 9.34005 10.3023 9.34005 9.75C9.34005 9.19772 8.89233 8.75 8.34005 8.75C7.78777 8.75 7.34005 9.19772 7.34005 9.75C7.34005 10.3023 7.78777 10.75 8.34005 10.75ZM11.4369 10.75C11.713 10.75 11.9369 10.5261 11.9369 10.25C11.9369 9.97386 11.713 9.75 11.4369 9.75C11.1607 9.75 10.9369 9.97386 10.9369 10.25C10.9369 10.5261 11.1607 10.75 11.4369 10.75ZM11.4369 11.25C11.9891 11.25 12.4369 10.8023 12.4369 10.25C12.4369 9.69772 11.9891 9.25 11.4369 9.25C10.8846 9.25 10.4369 9.69772 10.4369 10.25C10.4369 10.8023 10.8846 11.25 11.4369 11.25Z" fill="currentColor" /> </svg> );};