Editable

1import { Editable, EditableArea, EditableInput, EditablePreview } from "@/components/ui/editable";
2
3<Editable />

1"use client";
2
3import {
4  Editable as ArkEditable,
5  useEditableContext,
6} from "@ark-ui/react/editable";
7import type React from "react";
8import { cn } from "@/lib/utils";
9import {
10  type ButtonProps,
11  buttonVariants,
12} from "@/registry/react/components/button";
13
14export const useEditable = useEditableContext;
15
16export interface EditableProps
17  extends React.ComponentProps<typeof ArkEditable.Root> {
18  /**
19   * The orientation of the editable
20   */
21  orientation?: "horizontal" | "vertical";
22}
23
24export const Editable = (props: EditableProps) => {
25  const { orientation = "horizontal", className, ...rest } = props;
26
27  return (
28    <ArkEditable.Root