notra-editor 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -1,1309 +1,22 @@
-// src/index.ts
 import "./styles/globals.css";
-
-// src/notra-editor.tsx
-import { EditorContent } from "@tiptap/react";
-
-// src/components/blockquote-button/blockquote-button.tsx
-import { TextQuote } from "lucide-react";
-import { forwardRef, useCallback, useEffect, useState } from "react";
-
-// src/components/ui/button.tsx
-import { cva } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-// src/lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { jsx } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "nt:group/button nt:inline-flex nt:shrink-0 nt:items-center nt:justify-center nt:rounded-lg nt:border nt:border-transparent nt:bg-clip-padding nt:text-sm nt:font-medium nt:whitespace-nowrap nt:transition-all nt:outline-none nt:select-none nt:focus-visible:border-ring nt:focus-visible:ring-3 nt:focus-visible:ring-ring/50 nt:active:not-aria-[haspopup]:translate-y-px nt:disabled:pointer-events-none nt:disabled:opacity-50 nt:aria-invalid:border-destructive nt:aria-invalid:ring-3 nt:aria-invalid:ring-destructive/20 nt:dark:aria-invalid:border-destructive/50 nt:dark:aria-invalid:ring-destructive/40 nt:[&_svg]:pointer-events-none nt:[&_svg]:shrink-0 nt:[&_svg:not([class*=size-])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "nt:bg-primary nt:text-primary-foreground nt:[a]:hover:bg-primary/80",
-        outline: "nt:border-border nt:bg-background nt:hover:bg-muted nt:hover:text-foreground nt:aria-expanded:bg-muted nt:aria-expanded:text-foreground nt:dark:border-input nt:dark:bg-input/30 nt:dark:hover:bg-input/50",
-        secondary: "nt:bg-secondary nt:text-secondary-foreground nt:hover:bg-secondary/80 nt:aria-expanded:bg-secondary nt:aria-expanded:text-secondary-foreground",
-        ghost: "nt:hover:bg-muted nt:hover:text-foreground nt:aria-expanded:bg-muted nt:aria-expanded:text-foreground nt:dark:hover:bg-muted/50",
-        destructive: "nt:bg-destructive/10 nt:text-destructive nt:hover:bg-destructive/20 nt:focus-visible:border-destructive/40 nt:focus-visible:ring-destructive/20 nt:dark:bg-destructive/20 nt:dark:hover:bg-destructive/30 nt:dark:focus-visible:ring-destructive/40",
-        link: "nt:text-primary nt:underline-offset-4 nt:hover:underline"
-      },
-      size: {
-        default: "nt:h-8 nt:gap-1.5 nt:px-2.5 nt:has-data-[icon=inline-end]:pr-2 nt:has-data-[icon=inline-start]:pl-2",
-        xs: "nt:h-6 nt:gap-1 nt:rounded-[min(var(--radius-md),10px)] nt:px-2 nt:text-xs nt:in-data-[slot=button-group]:rounded-lg nt:has-data-[icon=inline-end]:pr-1.5 nt:has-data-[icon=inline-start]:pl-1.5 nt:[&_svg:not([class*=size-])]:size-3",
-        sm: "nt:h-7 nt:gap-1 nt:rounded-[min(var(--radius-md),12px)] nt:px-2.5 nt:text-[0.8rem] nt:in-data-[slot=button-group]:rounded-lg nt:has-data-[icon=inline-end]:pr-1.5 nt:has-data-[icon=inline-start]:pl-1.5 nt:[&_svg:not([class*=size-])]:size-3.5",
-        lg: "nt:h-9 nt:gap-1.5 nt:px-2.5 nt:has-data-[icon=inline-end]:pr-2 nt:has-data-[icon=inline-start]:pl-2",
-        icon: "nt:size-8",
-        "icon-xs": "nt:size-6 nt:rounded-[min(var(--radius-md),10px)] nt:in-data-[slot=button-group]:rounded-lg nt:[&_svg:not([class*=size-])]:size-3",
-        "icon-sm": "nt:size-7 nt:rounded-[min(var(--radius-md),12px)] nt:in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "nt:size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn(buttonVariants({ variant, size, className })),
-      "data-size": size,
-      "data-slot": "button",
-      "data-variant": variant,
-      ...props
-    }
-  );
-}
-
-// src/components/blockquote-button/blockquote-button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function canToggleBlockquote(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().toggleWrap("blockquote") || editor.can().clearNodes();
-}
-var BlockquoteButton = forwardRef(({ editor, onClick, ...buttonProps }, ref) => {
-  const [isActive, setIsActive] = useState(false);
-  const [canToggle, setCanToggle] = useState(false);
-  useEffect(() => {
-    if (!editor) return;
-    const update = () => {
-      setIsActive(editor.isActive("blockquote"));
-      setCanToggle(canToggleBlockquote(editor));
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const handleClick = useCallback(
-    (event) => {
-      onClick?.(event);
-      if (event.defaultPrevented) return;
-      if (!editor) return;
-      if (editor.isActive("blockquote")) {
-        editor.chain().focus().lift("blockquote").run();
-      } else {
-        editor.chain().focus().clearNodes().wrapIn("blockquote").run();
-      }
-    },
-    [editor, onClick]
-  );
-  return /* @__PURE__ */ jsx2(
-    Button,
-    {
-      ref,
-      "aria-label": "Blockquote",
-      "aria-pressed": isActive,
-      "data-active-state": isActive ? "on" : "off",
-      disabled: !canToggle,
-      size: "icon",
-      tabIndex: -1,
-      type: "button",
-      variant: "ghost",
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx2(
-        TextQuote,
-        {
-          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-        }
-      )
-    }
-  );
-});
-BlockquoteButton.displayName = "BlockquoteButton";
-
-// src/components/code-block-button/code-block-button.tsx
-import { SquareCode } from "lucide-react";
-import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function canToggleCodeBlock(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().toggleNode("codeBlock", "paragraph") || editor.can().clearNodes();
-}
-var CodeBlockButton = forwardRef2(({ editor, onClick, ...buttonProps }, ref) => {
-  const [isActive, setIsActive] = useState2(false);
-  const [canToggle, setCanToggle] = useState2(false);
-  useEffect2(() => {
-    if (!editor) return;
-    const update = () => {
-      setIsActive(editor.isActive("codeBlock"));
-      setCanToggle(canToggleCodeBlock(editor));
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const handleClick = useCallback2(
-    (event) => {
-      onClick?.(event);
-      if (event.defaultPrevented) return;
-      if (!editor) return;
-      if (editor.isActive("codeBlock")) {
-        editor.chain().focus().setNode("paragraph").run();
-      } else {
-        editor.chain().focus().clearNodes().toggleNode("codeBlock", "paragraph").run();
-      }
-    },
-    [editor, onClick]
-  );
-  return /* @__PURE__ */ jsx3(
-    Button,
-    {
-      ref,
-      "aria-label": "Code Block",
-      "aria-pressed": isActive,
-      "data-active-state": isActive ? "on" : "off",
-      disabled: !canToggle,
-      size: "icon",
-      tabIndex: -1,
-      type: "button",
-      variant: "ghost",
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx3(
-        SquareCode,
-        {
-          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-        }
-      )
-    }
-  );
-});
-CodeBlockButton.displayName = "CodeBlockButton";
-
-// src/components/heading-dropdown-menu/heading-dropdown-menu.tsx
-import { ChevronDown } from "lucide-react";
-import { forwardRef as forwardRef4 } from "react";
-
-// src/components/heading-dropdown-menu/heading-menu-item.tsx
-import { forwardRef as forwardRef3 } from "react";
-
-// src/components/heading-dropdown-menu/use-heading.ts
-import { Heading, Heading1, Heading2, Heading3, Heading4 } from "lucide-react";
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
-var headingIcons = {
-  1: Heading1,
-  2: Heading2,
-  3: Heading3,
-  4: Heading4
-};
-var headingLabels = {
-  1: "Heading 1",
-  2: "Heading 2",
-  3: "Heading 3",
-  4: "Heading 4"
-};
-function canToggleHeading(editor, level) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().setNode("heading", { level }) || editor.can().clearNodes();
-}
-function useHeading({
-  editor,
-  level
-}) {
-  const [isActive, setIsActive] = useState3(false);
-  const [canToggle, setCanToggle] = useState3(false);
-  useEffect3(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      setIsActive(editor.isActive("heading", { level }));
-      setCanToggle(canToggleHeading(editor, level));
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, level]);
-  const handleToggle = useCallback3(() => {
-    if (!editor || !editor.isEditable) return false;
-    if (editor.isActive("heading", { level })) {
-      return editor.chain().focus().setNode("paragraph").run();
-    }
-    return editor.chain().focus().clearNodes().setNode("heading", { level }).run();
-  }, [editor, level]);
-  return {
-    isActive,
-    canToggle,
-    handleToggle,
-    label: headingLabels[level],
-    Icon: headingIcons[level]
-  };
-}
-function useActiveHeadingLevel(editor, levels) {
-  const [activeLevel, setActiveLevel] = useState3(null);
-  useEffect3(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      const found = levels.find(
-        (level) => editor.isActive("heading", { level })
-      );
-      setActiveLevel(found ?? null);
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, levels]);
-  return activeLevel;
-}
-function getHeadingTriggerIcon(activeLevel) {
-  if (activeLevel === null) return Heading;
-  return headingIcons[activeLevel];
-}
-
-// src/components/ui/dropdown-menu.tsx
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-    DropdownMenuPrimitive.Content,
-    {
-      align,
-      className: cn(
-        "nt:z-50 nt:max-h-(--radix-dropdown-menu-content-available-height) nt:w-(--radix-dropdown-menu-trigger-width) nt:min-w-32 nt:origin-(--radix-dropdown-menu-content-transform-origin) nt:overflow-x-hidden nt:overflow-y-auto nt:rounded-lg nt:bg-popover nt:p-1 nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:duration-100 nt:data-[side=bottom]:slide-in-from-top-2 nt:data-[side=left]:slide-in-from-right-2 nt:data-[side=right]:slide-in-from-left-2 nt:data-[side=top]:slide-in-from-bottom-2 nt:data-[state=closed]:overflow-hidden nt:data-open:animate-in nt:data-open:fade-in-0 nt:data-open:zoom-in-95 nt:data-closed:animate-out nt:data-closed:fade-out-0 nt:data-closed:zoom-out-95",
-        className
-      ),
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      ...props
-    }
-  ) });
-}
-function DropdownMenuGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    DropdownMenuPrimitive.Item,
-    {
-      className: cn(
-        "nt:group/dropdown-menu-item nt:relative nt:flex nt:cursor-default nt:items-center nt:gap-1.5 nt:rounded-md nt:px-1.5 nt:py-1 nt:text-sm nt:outline-hidden nt:select-none nt:focus:bg-accent nt:focus:text-accent-foreground nt:not-data-[variant=destructive]:focus:**:text-accent-foreground nt:data-inset:pl-7 nt:data-[variant=destructive]:text-destructive nt:data-[variant=destructive]:focus:bg-destructive/10 nt:data-[variant=destructive]:focus:text-destructive nt:dark:data-[variant=destructive]:focus:bg-destructive/20 nt:data-disabled:pointer-events-none nt:data-disabled:opacity-50 nt:[&_svg]:pointer-events-none nt:[&_svg]:shrink-0 nt:[&_svg:not([class*=size-])]:size-4 nt:data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      ),
-      "data-inset": inset,
-      "data-slot": "dropdown-menu-item",
-      "data-variant": variant,
-      ...props
-    }
-  );
-}
-
-// src/components/heading-dropdown-menu/heading-menu-item.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var HeadingMenuItem = forwardRef3(
-  ({ editor, level }, ref) => {
-    const { isActive, canToggle, handleToggle, label, Icon } = useHeading({
-      editor,
-      level
-    });
-    return /* @__PURE__ */ jsxs2(
-      DropdownMenuItem,
-      {
-        ref,
-        "aria-label": label,
-        className: "nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]",
-        "data-active-state": isActive ? "on" : "off",
-        disabled: !canToggle,
-        onSelect: handleToggle,
-        children: [
-          /* @__PURE__ */ jsx5(Icon, {}),
-          /* @__PURE__ */ jsx5("span", { children: label })
-        ]
-      }
-    );
-  }
-);
-HeadingMenuItem.displayName = "HeadingMenuItem";
-
-// src/components/heading-dropdown-menu/heading-dropdown-menu.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var HeadingDropdownMenu = forwardRef4(({ editor, levels = [1, 2, 3, 4], ...buttonProps }, ref) => {
-  const activeLevel = useActiveHeadingLevel(editor, levels);
-  const TriggerIcon = getHeadingTriggerIcon(activeLevel);
-  return /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
-      Button,
-      {
-        ref,
-        "aria-label": "Heading",
-        className: "nt:gap-1 nt:px-2",
-        "data-active-state": activeLevel !== null ? "on" : "off",
-        size: "default",
-        tabIndex: -1,
-        type: "button",
-        variant: "ghost",
-        ...buttonProps,
-        children: [
-          /* @__PURE__ */ jsx6(
-            TriggerIcon,
-            {
-              className: activeLevel !== null ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-            }
-          ),
-          /* @__PURE__ */ jsx6(ChevronDown, { className: "nt:size-3" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx6(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ jsx6(DropdownMenuGroup, { children: levels.map((level) => /* @__PURE__ */ jsx6(HeadingMenuItem, { editor, level }, level)) }) })
-  ] });
-});
-HeadingDropdownMenu.displayName = "HeadingDropdownMenu";
-
-// src/components/link-popover/link-popover.tsx
+import { NotraEditor } from "./notra-editor";
+import { NotraReader } from "./notra-reader";
 import {
-  CornerDownLeft,
-  ExternalLink,
-  Link as LinkIcon,
-  Trash2
-} from "lucide-react";
-import { forwardRef as forwardRef5, useCallback as useCallback5, useEffect as useEffect5, useState as useState5 } from "react";
-
-// src/components/link-popover/use-link-popover.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState4 } from "react";
-function useLinkPopover({ editor }) {
-  const [url, setUrl] = useState4("");
-  const [isActive, setIsActive] = useState4(false);
-  const [canSet, setCanSet] = useState4(false);
-  useEffect4(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      const active = editor.isActive("link");
-      setIsActive(active);
-      setCanSet(editor.isEditable);
-      if (active) {
-        setUrl(editor.getAttributes("link").href ?? "");
-      }
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor]);
-  const setLink = useCallback4(() => {
-    if (!editor) return;
-    if (!url) {
-      editor.chain().focus().extendMarkRange("link").unsetLink().run();
-      return;
-    }
-    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-  }, [editor, url]);
-  const removeLink = useCallback4(() => {
-    if (!editor) return;
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    setUrl("");
-  }, [editor]);
-  const openLink = useCallback4(() => {
-    if (!url) return;
-    const sanitized = /^https?:\/\//i.test(url) ? url : `https://${url}`;
-    window.open(sanitized, "_blank", "noopener,noreferrer");
-  }, [url]);
-  return { url, setUrl, isActive, canSet, setLink, removeLink, openLink };
-}
-
-// src/components/ui/input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx7(
-    "input",
-    {
-      className: cn(
-        "nt:flex nt:h-9 nt:w-full nt:min-w-0 nt:rounded-md nt:border nt:border-input nt:bg-transparent nt:px-3 nt:py-1 nt:text-base nt:shadow-xs nt:transition-[color,box-shadow] nt:outline-none nt:file:inline-flex nt:file:h-7 nt:file:border-0 nt:file:bg-transparent nt:file:text-sm nt:file:font-medium nt:file:text-foreground nt:placeholder:text-muted-foreground nt:selection:bg-primary nt:selection:text-primary-foreground nt:dark:bg-input/30 nt:md:text-sm nt:focus-visible:border-ring nt:focus-visible:ring-3 nt:focus-visible:ring-ring/50 nt:aria-invalid:border-destructive nt:aria-invalid:ring-3 nt:aria-invalid:ring-destructive/20 nt:dark:aria-invalid:ring-destructive/40 nt:disabled:cursor-not-allowed nt:disabled:opacity-50",
-        className
-      ),
-      "data-slot": "input",
-      type,
-      ...props
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx8(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
-    PopoverPrimitive.Content,
-    {
-      align,
-      className: cn(
-        "nt:z-50 nt:w-72 nt:origin-(--radix-popover-content-transform-origin) nt:rounded-lg nt:bg-popover nt:p-4 nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:outline-none nt:data-[side=bottom]:slide-in-from-top-2 nt:data-[side=left]:slide-in-from-right-2 nt:data-[side=right]:slide-in-from-left-2 nt:data-[side=top]:slide-in-from-bottom-2 nt:data-open:animate-in nt:data-open:fade-in-0 nt:data-open:zoom-in-95 nt:data-closed:animate-out nt:data-closed:fade-out-0 nt:data-closed:zoom-out-95",
-        className
-      ),
-      "data-slot": "popover-content",
-      sideOffset,
-      ...props
-    }
-  ) });
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx9(
-    SeparatorPrimitive.Root,
-    {
-      className: cn(
-        "nt:shrink-0 nt:bg-border nt:data-[orientation=horizontal]:h-px nt:data-[orientation=horizontal]:w-full nt:data-[orientation=vertical]:h-full nt:data-[orientation=vertical]:w-px",
-        className
-      ),
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      ...props
-    }
-  );
-}
-
-// src/components/link-popover/link-popover.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var LinkPopover = forwardRef5(
-  ({ editor, ...buttonProps }, ref) => {
-    const [isOpen, setIsOpen] = useState5(false);
-    const { url, setUrl, isActive, canSet, setLink, removeLink, openLink } = useLinkPopover({ editor });
-    useEffect5(() => {
-      if (isActive) {
-        setIsOpen(true);
-      }
-    }, [isActive]);
-    const handleSetLink = useCallback5(() => {
-      setLink();
-      setIsOpen(false);
-    }, [setLink]);
-    const handleRemoveLink = useCallback5(() => {
-      removeLink();
-      setIsOpen(false);
-    }, [removeLink]);
-    const handleKeyDown = useCallback5(
-      (event) => {
-        if (event.key === "Enter") {
-          event.preventDefault();
-          handleSetLink();
-        }
-      },
-      [handleSetLink]
-    );
-    return /* @__PURE__ */ jsxs4(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
-        Button,
-        {
-          ref,
-          "aria-label": "Link",
-          "aria-pressed": isActive,
-          "data-active-state": isActive ? "on" : "off",
-          disabled: !canSet,
-          size: "icon",
-          tabIndex: -1,
-          type: "button",
-          variant: "ghost",
-          ...buttonProps,
-          children: /* @__PURE__ */ jsx10(
-            LinkIcon,
-            {
-              className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxs4(
-        PopoverContent,
-        {
-          align: "start",
-          className: "nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1",
-          children: [
-            /* @__PURE__ */ jsx10(
-              Input,
-              {
-                autoFocus: true,
-                className: "nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
-                placeholder: "Paste a link...",
-                type: "url",
-                value: url,
-                onChange: (e) => setUrl(e.target.value),
-                onKeyDown: handleKeyDown
-              }
-            ),
-            /* @__PURE__ */ jsx10(
-              Button,
-              {
-                "aria-label": "Apply link",
-                disabled: !url && !isActive,
-                size: "icon-sm",
-                tabIndex: -1,
-                type: "button",
-                variant: "ghost",
-                onClick: handleSetLink,
-                children: /* @__PURE__ */ jsx10(CornerDownLeft, {})
-              }
-            ),
-            /* @__PURE__ */ jsx10(Separator, { className: "nt:h-5", orientation: "vertical" }),
-            /* @__PURE__ */ jsx10(
-              Button,
-              {
-                "aria-label": "Open link in new window",
-                size: "icon-sm",
-                tabIndex: -1,
-                type: "button",
-                variant: "ghost",
-                onClick: openLink,
-                children: /* @__PURE__ */ jsx10(ExternalLink, {})
-              }
-            ),
-            /* @__PURE__ */ jsx10(
-              Button,
-              {
-                "aria-label": "Remove link",
-                size: "icon-sm",
-                tabIndex: -1,
-                type: "button",
-                variant: "ghost",
-                onClick: handleRemoveLink,
-                children: /* @__PURE__ */ jsx10(Trash2, {})
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
-LinkPopover.displayName = "LinkPopover";
-
-// src/components/list-dropdown-menu/list-dropdown-menu.tsx
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { forwardRef as forwardRef7 } from "react";
-
-// src/components/list-dropdown-menu/list-menu-item.tsx
-import { forwardRef as forwardRef6 } from "react";
-
-// src/components/list-dropdown-menu/use-list.ts
-import { List, ListOrdered, ListTodo } from "lucide-react";
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState6 } from "react";
-var listIcons = {
-  bulletList: List,
-  orderedList: ListOrdered,
-  taskList: ListTodo
-};
-var listLabels = {
-  bulletList: "Bullet List",
-  orderedList: "Ordered List",
-  taskList: "Task List"
-};
-var listItemTypes = {
-  bulletList: "listItem",
-  orderedList: "listItem",
-  taskList: "taskItem"
-};
-function canToggleList(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().toggleList("bulletList", "listItem") || editor.can().clearNodes();
-}
-function useList({
-  editor,
-  type
-}) {
-  const [isActive, setIsActive] = useState6(false);
-  const [canToggle, setCanToggle] = useState6(false);
-  useEffect6(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      setIsActive(editor.isActive(type));
-      setCanToggle(canToggleList(editor));
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, type]);
-  const handleToggle = useCallback6(() => {
-    if (!editor || !editor.isEditable) return false;
-    const itemType = listItemTypes[type];
-    if (editor.isActive(type)) {
-      return editor.chain().focus().clearNodes().run();
-    }
-    return editor.chain().focus().clearNodes().toggleList(type, itemType).run();
-  }, [editor, type]);
-  return {
-    isActive,
-    canToggle,
-    handleToggle,
-    label: listLabels[type],
-    Icon: listIcons[type]
-  };
-}
-function useActiveListType(editor, types) {
-  const [activeType, setActiveType] = useState6(null);
-  useEffect6(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      const found = types.find((type) => editor.isActive(type));
-      setActiveType(found ?? null);
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, types]);
-  return activeType;
-}
-function getListTriggerIcon(activeType) {
-  if (activeType === null) return List;
-  return listIcons[activeType];
-}
-
-// src/components/list-dropdown-menu/list-menu-item.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var ListMenuItem = forwardRef6(
-  ({ editor, listType }, ref) => {
-    const { isActive, canToggle, handleToggle, label, Icon } = useList({
-      editor,
-      type: listType
-    });
-    return /* @__PURE__ */ jsxs5(
-      DropdownMenuItem,
-      {
-        ref,
-        "aria-label": label,
-        className: "nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]",
-        "data-active-state": isActive ? "on" : "off",
-        disabled: !canToggle,
-        onSelect: handleToggle,
-        children: [
-          /* @__PURE__ */ jsx11(Icon, {}),
-          /* @__PURE__ */ jsx11("span", { children: label })
-        ]
-      }
-    );
-  }
-);
-ListMenuItem.displayName = "ListMenuItem";
-
-// src/components/list-dropdown-menu/list-dropdown-menu.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var ListDropdownMenu = forwardRef7(
-  ({
-    editor,
-    types = ["bulletList", "orderedList", "taskList"],
-    ...buttonProps
-  }, ref) => {
-    const activeType = useActiveListType(editor, types);
-    const TriggerIcon = getListTriggerIcon(activeType);
-    return /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
-        Button,
-        {
-          ref,
-          "aria-label": "List",
-          className: "nt:gap-1 nt:px-2",
-          "data-active-state": activeType !== null ? "on" : "off",
-          size: "default",
-          tabIndex: -1,
-          type: "button",
-          variant: "ghost",
-          ...buttonProps,
-          children: [
-            /* @__PURE__ */ jsx12(
-              TriggerIcon,
-              {
-                className: activeType !== null ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx12(ChevronDown2, { className: "nt:size-3" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx12(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ jsx12(DropdownMenuGroup, { children: types.map((type) => /* @__PURE__ */ jsx12(ListMenuItem, { editor, listType: type }, type)) }) })
-    ] });
-  }
-);
-ListDropdownMenu.displayName = "ListDropdownMenu";
-
-// src/components/mark-button/mark-button.tsx
-import { forwardRef as forwardRef8, useCallback as useCallback8 } from "react";
-
-// src/components/mark-button/use-mark.ts
-import { Bold, Code, Italic, Strikethrough } from "lucide-react";
-import { useCallback as useCallback7, useEffect as useEffect7, useState as useState7 } from "react";
-var markLabels = {
-  bold: "Bold",
-  italic: "Italic",
-  strike: "Strikethrough",
-  code: "Code"
-};
-var markIcons = {
-  bold: Bold,
-  italic: Italic,
-  strike: Strikethrough,
-  code: Code
-};
-function useMark({ editor, type }) {
-  const [isActive, setIsActive] = useState7(false);
-  const [canToggle, setCanToggle] = useState7(false);
-  useEffect7(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      setIsActive(editor.isActive(type));
-      setCanToggle(editor.isEditable && editor.can().toggleMark(type));
-    };
-    handleUpdate();
-    editor.on("selectionUpdate", handleUpdate);
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleUpdate);
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, type]);
-  const handleToggle = useCallback7(() => {
-    if (!editor || !editor.isEditable) return false;
-    return editor.chain().focus().toggleMark(type).run();
-  }, [editor, type]);
-  return {
-    isActive,
-    canToggle,
-    handleToggle,
-    label: markLabels[type],
-    Icon: markIcons[type]
-  };
-}
-
-// src/components/mark-button/mark-button.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var MarkButton = forwardRef8(
-  ({ editor, type, onClick, ...buttonProps }, ref) => {
-    const { isActive, canToggle, handleToggle, label, Icon } = useMark({
-      editor,
-      type
-    });
-    const handleClick = useCallback8(
-      (event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) return;
-        handleToggle();
-      },
-      [handleToggle, onClick]
-    );
-    return /* @__PURE__ */ jsx13(
-      Button,
-      {
-        ref,
-        "aria-label": label,
-        "aria-pressed": isActive,
-        "data-active-state": isActive ? "on" : "off",
-        disabled: !canToggle,
-        size: "icon",
-        tabIndex: -1,
-        type: "button",
-        variant: "ghost",
-        onClick: handleClick,
-        ...buttonProps,
-        children: /* @__PURE__ */ jsx13(
-          Icon,
-          {
-            className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
-          }
-        )
-      }
-    );
-  }
-);
-MarkButton.displayName = "MarkButton";
-
-// src/components/toolbar/toolbar.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Toolbar = forwardRef9(
-  ({ children, className, variant = "fixed", ...props }, ref) => {
-    const classNames = ["tiptap-toolbar", className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx14(
-      "div",
-      {
-        ref,
-        "aria-label": "toolbar",
-        className: classNames,
-        "data-variant": variant,
-        role: "toolbar",
-        ...props,
-        children
-      }
-    );
-  }
-);
-Toolbar.displayName = "Toolbar";
-function ToolbarGroup({
-  children,
-  className,
-  ...props
-}) {
-  const classNames = ["tiptap-toolbar-group", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx14("div", { className: classNames, role: "group", ...props, children });
-}
-function ToolbarSeparator({
-  orientation = "vertical",
-  className,
-  ...props
-}) {
-  const classNames = ["tiptap-separator", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      "aria-orientation": orientation === "vertical" ? orientation : void 0,
-      className: classNames,
-      "data-orientation": orientation,
-      role: "separator",
-      ...props
-    }
-  );
-}
-
-// src/components/ui-primitive/spacer.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-function Spacer() {
-  return /* @__PURE__ */ jsx15("div", { style: { flex: 1 } });
-}
-
-// src/components/undo-redo-button/undo-redo-button.tsx
-import { forwardRef as forwardRef10, useCallback as useCallback10 } from "react";
-
-// src/components/undo-redo-button/use-undo-redo.ts
-import { Undo2, Redo2 } from "lucide-react";
-import { useCallback as useCallback9, useEffect as useEffect8, useState as useState8 } from "react";
-var actionLabels = {
-  undo: "Undo",
-  redo: "Redo"
-};
-var actionIcons = {
-  undo: Undo2,
-  redo: Redo2
-};
-function canExecuteAction(editor, action) {
-  if (!editor || !editor.isEditable) return false;
-  return action === "undo" ? editor.can().undo() : editor.can().redo();
-}
-function useUndoRedo({ editor, action }) {
-  const [canExecute, setCanExecute] = useState8(false);
-  useEffect8(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      setCanExecute(canExecuteAction(editor, action));
-    };
-    handleUpdate();
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, action]);
-  const handleAction = useCallback9(() => {
-    if (!editor || !editor.isEditable) return false;
-    if (!canExecuteAction(editor, action)) return false;
-    const chain = editor.chain().focus();
-    return action === "undo" ? chain.undo().run() : chain.redo().run();
-  }, [editor, action]);
-  return {
-    canExecute,
-    handleAction,
-    label: actionLabels[action],
-    Icon: actionIcons[action]
-  };
-}
-
-// src/components/undo-redo-button/undo-redo-button.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var UndoRedoButton = forwardRef10(({ editor, action, onClick, ...buttonProps }, ref) => {
-  const { canExecute, handleAction, label, Icon } = useUndoRedo({
-    editor,
-    action
-  });
-  const handleClick = useCallback10(
-    (event) => {
-      onClick?.(event);
-      if (event.defaultPrevented) return;
-      handleAction();
-    },
-    [handleAction, onClick]
-  );
-  return /* @__PURE__ */ jsx16(
-    Button,
-    {
-      ref,
-      "aria-label": label,
-      disabled: !canExecute,
-      size: "icon",
-      tabIndex: -1,
-      type: "button",
-      variant: "ghost",
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx16(Icon, {})
-    }
-  );
-});
-UndoRedoButton.displayName = "UndoRedoButton";
-
-// src/hooks/use-markdown-editor.ts
-import { EditorState } from "@tiptap/pm/state";
-import { useEditor } from "@tiptap/react";
-import { useEffect as useEffect9, useRef } from "react";
-
-// src/extensions/shared.ts
-import { ListKit } from "@tiptap/extension-list";
-import StarterKit from "@tiptap/starter-kit";
-var starterKitBaseConfig = {
-  heading: { levels: [1, 2, 3, 4, 5, 6] },
-  link: {
-    openOnClick: false,
-    autolink: true
-  },
-  // Disable StarterKit's built-in list handling; use @tiptap/extension-list instead
-  bulletList: false,
-  orderedList: false,
-  listItem: false,
-  listKeymap: false
-};
-var sharedExtensions = [
-  StarterKit.configure({
-    ...starterKitBaseConfig,
-    dropcursor: false,
-    gapcursor: false,
-    undoRedo: false,
-    trailingNode: false
-  }),
-  ListKit
-];
-
-// src/extensions/editor.ts
-import { ListKit as ListKit2 } from "@tiptap/extension-list";
-import StarterKit2 from "@tiptap/starter-kit";
-import { Markdown } from "tiptap-markdown";
-var editorExtensions = [
-  StarterKit2.configure(starterKitBaseConfig),
-  ListKit2,
-  Markdown.configure({
-    html: false,
-    transformPastedText: true,
-    transformCopiedText: true
-  })
-];
-
-// src/hooks/use-markdown-editor.ts
-function getMarkdown(storage) {
-  return storage.markdown.getMarkdown();
-}
-function useMarkdownEditor({
-  value,
-  onChange,
-  editable = true
-}) {
-  const externalValue = useRef(value);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const editor = useEditor({
-    extensions: editorExtensions,
-    editable,
-    content: value,
-    onUpdate({ editor: editor2 }) {
-      const md = getMarkdown(
-        editor2.storage
-      );
-      externalValue.current = md;
-      onChangeRef.current(md);
-    },
-    onCreate({ editor: editor2 }) {
-      setTimeout(() => {
-        if (editor2.isDestroyed) return;
-        const { state } = editor2;
-        const freshState = EditorState.create({
-          doc: state.doc,
-          selection: state.selection,
-          plugins: state.plugins
-        });
-        editor2.view.updateState(freshState);
-        editor2.view.dispatch(editor2.view.state.tr);
-      }, 0);
-    }
-  });
-  useEffect9(() => {
-    if (!editor) return;
-    if (value === externalValue.current) return;
-    externalValue.current = value;
-    editor.commands.setContent(value);
-  }, [value, editor]);
-  useEffect9(() => {
-    if (!editor) return;
-    editor.setEditable(editable);
-  }, [editable, editor]);
-  return { editor };
-}
-
-// src/notra-editor.tsx
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-function NotraEditor({
-  value,
-  onChange,
-  placeholder,
-  readOnly = false,
-  className
-}) {
-  const { editor } = useMarkdownEditor({
-    value,
-    onChange,
-    placeholder,
-    editable: !readOnly
-  });
-  const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs7("div", { className: classNames, children: [
-    /* @__PURE__ */ jsxs7(Toolbar, { variant: "fixed", children: [
-      /* @__PURE__ */ jsx17(Spacer, {}),
-      /* @__PURE__ */ jsxs7(ToolbarGroup, { children: [
-        /* @__PURE__ */ jsx17(UndoRedoButton, { action: "undo", editor }),
-        /* @__PURE__ */ jsx17(UndoRedoButton, { action: "redo", editor })
-      ] }),
-      /* @__PURE__ */ jsx17(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs7(ToolbarGroup, { children: [
-        /* @__PURE__ */ jsx17(HeadingDropdownMenu, { editor, levels: [1, 2, 3, 4] }),
-        /* @__PURE__ */ jsx17(
-          ListDropdownMenu,
-          {
-            editor,
-            types: ["bulletList", "orderedList", "taskList"]
-          }
-        ),
-        /* @__PURE__ */ jsx17(BlockquoteButton, { editor }),
-        /* @__PURE__ */ jsx17(CodeBlockButton, { editor })
-      ] }),
-      /* @__PURE__ */ jsx17(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsxs7(ToolbarGroup, { children: [
-        /* @__PURE__ */ jsx17(MarkButton, { editor, type: "bold" }),
-        /* @__PURE__ */ jsx17(MarkButton, { editor, type: "italic" }),
-        /* @__PURE__ */ jsx17(MarkButton, { editor, type: "strike" }),
-        /* @__PURE__ */ jsx17(MarkButton, { editor, type: "code" }),
-        /* @__PURE__ */ jsx17(LinkPopover, { editor })
-      ] }),
-      /* @__PURE__ */ jsx17(Spacer, {})
-    ] }),
-    /* @__PURE__ */ jsx17(EditorContent, { className: "notra-editor-content", editor })
-  ] });
-}
-
-// src/notra-reader.tsx
-import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
-
-// src/utils/markdown-to-json.ts
-import { Editor } from "@tiptap/core";
-import { Markdown as Markdown2 } from "tiptap-markdown";
-var parserExtensions = [
-  ...sharedExtensions,
-  Markdown2.configure({ html: false })
-];
-var parserEditor = null;
-function getParserEditor() {
-  if (!parserEditor) {
-    parserEditor = new Editor({
-      extensions: parserExtensions,
-      content: ""
-    });
-  }
-  return parserEditor;
-}
-function markdownToJSON(markdown) {
-  const editor = getParserEditor();
-  editor.commands.setContent(markdown);
-  return editor.getJSON();
-}
-
-// src/notra-reader.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-function NotraReader({ content, className }) {
-  const json = markdownToJSON(content);
-  const rendered = renderToReactElement({
-    extensions: sharedExtensions,
-    content: json
-  });
-  const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx18("div", { className: classNames, children: rendered });
-}
-
-// src/components/ui-primitive/dropdown-menu.tsx
-import { useEffect as useEffect10, useRef as useRef2, useState as useState9 } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-function DropdownMenu2({
-  trigger,
-  children,
-  open: controlledOpen,
-  onOpenChange
-}) {
-  const isControlled = controlledOpen !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(false);
-  const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const triggerRef = useRef2(null);
-  const contentRef = useRef2(null);
-  const [position, setPosition] = useState9({ top: 0, left: 0 });
-  const setOpen = (value) => {
-    if (!isControlled) {
-      setUncontrolledOpen(value);
-    }
-    onOpenChange?.(value);
-  };
-  useEffect10(() => {
-    if (!open || !triggerRef.current) return;
-    const updatePosition = () => {
-      if (!triggerRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom + 4,
-        left: rect.left + rect.width / 2
-      });
-    };
-    updatePosition();
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [open]);
-  useEffect10(() => {
-    if (!open) return;
-    const handleMouseDown = (event) => {
-      const target = event.target;
-      if (triggerRef.current?.contains(target) || contentRef.current?.contains(target)) {
-        return;
-      }
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => document.removeEventListener("mousedown", handleMouseDown);
-  }, [open]);
-  useEffect10(() => {
-    if (!open) return;
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open]);
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx19("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
-    open && createPortal(
-      /* @__PURE__ */ jsx19("div", { className: "notra-editor", children: /* @__PURE__ */ jsx19(
-        "div",
-        {
-          ref: contentRef,
-          className: "tiptap-dropdown-menu-content",
-          "data-state": "open",
-          role: "menu",
-          style: {
-            position: "fixed",
-            top: position.top,
-            left: position.left
-          },
-          children: /* @__PURE__ */ jsx19(
-            "div",
-            {
-              className: "tiptap-dropdown-menu-group",
-              onClick: () => setOpen(false),
-              children
-            }
-          )
-        }
-      ) }),
-      document.body
-    )
-  ] });
-}
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator
+} from "./components/toolbar/toolbar";
+import { UndoRedoButton } from "./components/undo-redo-button/undo-redo-button";
+import { Spacer } from "./components/ui/spacer";
+import { MarkButton } from "./components/mark-button/mark-button";
+import { HeadingDropdownMenu } from "./components/heading-dropdown-menu/heading-dropdown-menu";
+import { ListDropdownMenu } from "./components/list-dropdown-menu/list-dropdown-menu";
+import { BlockquoteButton } from "./components/blockquote-button/blockquote-button";
+import { CodeBlockButton } from "./components/code-block-button/code-block-button";
+import { LinkPopover } from "./components/link-popover/link-popover";
 export {
   BlockquoteButton,
   CodeBlockButton,
-  DropdownMenu2 as DropdownMenu,
   HeadingDropdownMenu,
   LinkPopover,
   ListDropdownMenu,