selection-toolbar

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