editable

1"use client";
2 
3import {
4  Direction as DirectionPrimitive,
5  Slot as SlotPrimitive,
6} from "radix-ui";
7import * as React from "react";
8import { useComposedRefs } from "@/lib/compose-refs";
9import { cn } from "@/lib/utils";
10import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input";
11import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
12import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
13import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
14 
15const ROOT_NAME = "Editable";
16const LABEL_NAME = "EditableLabel";
17const AREA_NAME = "EditableArea";
18const PREVIEW_NAME = "EditablePreview";
19const INPUT_NAME = "EditableInput";
20const TRIGGER_NAME = "EditableTrigger";
21const TOOLBAR_NAME = "EditableToolbar";
22const CANCEL_NAME = "EditableCancel";
23const SUBMIT_NAME = "EditableSubmit";
24 
25type Direction = "ltr" | "rtl";
26 
27interface DivProps extends React.ComponentProps<"div"> {
28  asChild?: boolean;
29}
30 
31type RootElement = React.ComponentRef<typeof Editable>;
32type PreviewElement = React.ComponentRef<typeof EditablePreview>;
33type SubmitElement = React.ComponentRef<typeof EditableSubmit>;
34type InputElement = React.ComponentRef<typeof EditableInput>;
35 
36interface StoreState {
37  value: string;
38  editing: boolean;
39}
40 
41interface Store {
42  subscribe: (callback: () => void) => () => void;
43  getState: () => StoreState;
44  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
45  notify: () => void;
46}
47 
48const StoreContext = React.createContext<Store | null>(null);
49 
50function useStoreContext(consumerName: string) {
51  const context = React.useContext(StoreContext);
52  if (!context) {
53    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
54  }
55  return context;
56}
57 
58function useStore<T>(
59  selector: (state: StoreState) => T,
60  ogStore?: Store | null,
61): T {
62  const contextStore = React.useContext(StoreContext);
63 
64  const store = ogStore ?? contextStore;
65 
66  if (!store) {
67    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
68  }
69 
70  const getSnapshot = React.useCallback(
71    () => selector(store.getState()),
72    [store, selector],
73  );
74 
75  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
76}
77 
78interface EditableContextValue {
79  rootId: string;
80  inputId: string;
81  labelId: string;
82  defaultValue: string;
83  onCancel: () => void;
84  onEdit: () => void;
85  onSubmit: (value: string) => void;
86// … truncated