selection-toolbar

1"use client";
2 
3import {
4  autoUpdate,
5  flip,
6  hide,
7  limitShift,
8  type Middleware,
9  offset,
10  type Placement,
11  shift,
12  size,
13  useFloating,
14} from "@floating-ui/react-dom";
15import { Slot as SlotPrimitive } from "radix-ui";
16import * as React from "react";
17import * as ReactDOM from "react-dom";
18import { useComposedRefs } from "@/lib/compose-refs";
19import { cn } from "@/lib/utils";
20import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
21import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
22import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
23import { Button } from "@/registry/bases/radix/ui/button";
24 
25const ROOT_NAME = "SelectionToolbar";
26const ITEM_NAME = "SelectionToolbarItem";
27 
28const SIDE_OPTIONS = ["top", "right", "bottom", "left"] as const;
29const ALIGN_OPTIONS = ["start", "center", "end"] as const;
30 
31type Side = (typeof SIDE_OPTIONS)[number];
32type Align = (typeof ALIGN_OPTIONS)[number];
33type Boundary = Element | null;
34 
35interface DivProps extends React.ComponentProps<"div"> {
36  asChild?: boolean;
37}
38 
39type ItemElement = React.ComponentRef<typeof SelectionToolbarItem>;
40 
41function getSideAndAlignFromPlacement(placement: Placement) {
42  const [side, align = "center"] = placement.split("-");
43  return [side as Side, align as Align] as const;
44}
45 
46function isNotNull<T>(value: T | null): value is T {
47  return value !== null;
48}
49 
50interface SelectionRect {
51  top: number;
52  left: number;
53  width: number;
54  height: number;
55}
56 
57interface StoreState {
58  open: boolean;
59  selectedText: string;
60  selectionRect: SelectionRect | null;
61}
62 
63interface Store {
64  subscribe: (callback: () => void) => () => void;
65  getState: () => StoreState;
66  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
67  notify: () => void;
68  batch: (fn: () => void) => void;
69}
70 
71const StoreContext = React.createContext<Store | null>(null);
72 
73function useStoreContext(consumerName: string) {
74  const context = React.useContext(StoreContext);
75  if (!context) {
76    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
77  }
78  return context;
79}
80 
81function useStore<T>(
82  selector: (state: StoreState) => T,
83  ogStore?: Store | null,
84): T {
85  const contextStore = React.useContext(StoreContext);
86 
87  const store = ogStore ?? contextStore;
88 
89  if (!store) {
90    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
91  }
92 
93  const getSnapshot = React.useCallback(
94// … truncated