notra-editor 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -30,17 +30,1048 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BlockquoteButton: () => BlockquoteButton,
+  CodeBlockButton: () => CodeBlockButton,
+  DropdownMenu: () => DropdownMenu2,
+  HeadingDropdownMenu: () => HeadingDropdownMenu,
+  LinkPopover: () => LinkPopover,
+  ListDropdownMenu: () => ListDropdownMenu,
+  MarkButton: () => MarkButton,
   NotraEditor: () => NotraEditor,
-  NotraReader: () => NotraReader
+  NotraReader: () => NotraReader,
+  Spacer: () => Spacer,
+  Toolbar: () => Toolbar,
+  ToolbarGroup: () => ToolbarGroup,
+  ToolbarSeparator: () => ToolbarSeparator,
+  UndoRedoButton: () => UndoRedoButton
 });
 module.exports = __toCommonJS(index_exports);
+var import_globals = require("./styles/globals.css");
 
 // src/notra-editor.tsx
-var import_react3 = require("@tiptap/react");
+var import_react18 = require("@tiptap/react");
 
-// src/hooks/use-markdown-editor.ts
-var import_react = require("@tiptap/react");
+// src/components/blockquote-button/blockquote-button.tsx
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+
+// src/components/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 ? import_radix_ui.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function canToggleBlockquote(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleWrap("blockquote") || editor.can().clearNodes();
+}
+var BlockquoteButton = (0, import_react.forwardRef)(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react.useState)(false);
+  (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime2.jsx)(
+    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__ */ (0, import_jsx_runtime2.jsx)(
+        import_lucide_react.TextQuote,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+BlockquoteButton.displayName = "BlockquoteButton";
+
+// src/components/code-block-button/code-block-button.tsx
+var import_lucide_react2 = require("lucide-react");
 var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function canToggleCodeBlock(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleNode("codeBlock", "paragraph") || editor.can().clearNodes();
+}
+var CodeBlockButton = (0, import_react2.forwardRef)(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = (0, import_react2.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useCallback)(
+    (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__ */ (0, import_jsx_runtime3.jsx)(
+    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__ */ (0, import_jsx_runtime3.jsx)(
+        import_lucide_react2.SquareCode,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+CodeBlockButton.displayName = "CodeBlockButton";
+
+// src/components/heading-dropdown-menu/heading-dropdown-menu.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_react5 = require("react");
+
+// src/components/heading-dropdown-menu/heading-menu-item.tsx
+var import_react4 = require("react");
+
+// src/components/heading-dropdown-menu/use-heading.ts
+var import_lucide_react3 = require("lucide-react");
+var import_react3 = require("react");
+var headingIcons = {
+  1: import_lucide_react3.Heading1,
+  2: import_lucide_react3.Heading2,
+  3: import_lucide_react3.Heading3,
+  4: import_lucide_react3.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] = (0, import_react3.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    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 = (0, import_react3.useCallback)(() => {
+    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] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    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 import_lucide_react3.Heading;
+  return headingIcons[activeLevel];
+}
+
+// src/components/ui/dropdown-menu.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.DropdownMenu.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__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.DropdownMenu.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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var HeadingMenuItem = (0, import_react4.forwardRef)(
+  ({ editor, level }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = useHeading({
+      editor,
+      level
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      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__ */ (0, import_jsx_runtime5.jsx)(Icon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+HeadingMenuItem.displayName = "HeadingMenuItem";
+
+// src/components/heading-dropdown-menu/heading-dropdown-menu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var HeadingDropdownMenu = (0, import_react5.forwardRef)(({ editor, levels = [1, 2, 3, 4], ...buttonProps }, ref) => {
+  const activeLevel = useActiveHeadingLevel(editor, levels);
+  const TriggerIcon = getHeadingTriggerIcon(activeLevel);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      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__ */ (0, import_jsx_runtime6.jsx)(
+            TriggerIcon,
+            {
+              className: activeLevel !== null ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronDown, { className: "nt:size-3" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuGroup, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeadingMenuItem, { editor, level }, level)) }) })
+  ] });
+});
+HeadingDropdownMenu.displayName = "HeadingDropdownMenu";
+
+// src/components/link-popover/link-popover.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_react7 = require("react");
+
+// src/components/link-popover/use-link-popover.ts
+var import_react6 = require("react");
+function useLinkPopover({ editor }) {
+  const [url, setUrl] = (0, import_react6.useState)("");
+  const [isActive, setIsActive] = (0, import_react6.useState)(false);
+  const [canSet, setCanSet] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    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 = (0, import_react6.useCallback)(() => {
+    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 = (0, import_react6.useCallback)(() => {
+    if (!editor) return;
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setUrl("");
+  }, [editor]);
+  const openLink = (0, import_react6.useCallback)(() => {
+    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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "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
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui3.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui3.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui3.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui3.Popover.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
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui4.Separator.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
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var LinkPopover = (0, import_react7.forwardRef)(
+  ({ editor, ...buttonProps }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+    const { url, setUrl, isActive, canSet, setLink, removeLink, openLink } = useLinkPopover({ editor });
+    (0, import_react7.useEffect)(() => {
+      if (isActive) {
+        setIsOpen(true);
+      }
+    }, [isActive]);
+    const handleSetLink = (0, import_react7.useCallback)(() => {
+      setLink();
+      setIsOpen(false);
+    }, [setLink]);
+    const handleRemoveLink = (0, import_react7.useCallback)(() => {
+      removeLink();
+      setIsOpen(false);
+    }, [removeLink]);
+    const handleKeyDown = (0, import_react7.useCallback)(
+      (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          handleSetLink();
+        }
+      },
+      [handleSetLink]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        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__ */ (0, import_jsx_runtime10.jsx)(
+            import_lucide_react6.Link,
+            {
+              className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        PopoverContent,
+        {
+          align: "start",
+          className: "nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (0, import_jsx_runtime10.jsx)(
+              Button,
+              {
+                "aria-label": "Apply link",
+                disabled: !url && !isActive,
+                size: "icon-sm",
+                tabIndex: -1,
+                type: "button",
+                variant: "ghost",
+                onClick: handleSetLink,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.CornerDownLeft, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Separator, { className: "nt:h-5", orientation: "vertical" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Button,
+              {
+                "aria-label": "Open link in new window",
+                size: "icon-sm",
+                tabIndex: -1,
+                type: "button",
+                variant: "ghost",
+                onClick: openLink,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ExternalLink, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Button,
+              {
+                "aria-label": "Remove link",
+                size: "icon-sm",
+                tabIndex: -1,
+                type: "button",
+                variant: "ghost",
+                onClick: handleRemoveLink,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Trash2, {})
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+LinkPopover.displayName = "LinkPopover";
+
+// src/components/list-dropdown-menu/list-dropdown-menu.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_react10 = require("react");
+
+// src/components/list-dropdown-menu/list-menu-item.tsx
+var import_react9 = require("react");
+
+// src/components/list-dropdown-menu/use-list.ts
+var import_lucide_react7 = require("lucide-react");
+var import_react8 = require("react");
+var listIcons = {
+  bulletList: import_lucide_react7.List,
+  orderedList: import_lucide_react7.ListOrdered,
+  taskList: import_lucide_react7.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] = (0, import_react8.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_react8.useCallback)(() => {
+    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] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    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 import_lucide_react7.List;
+  return listIcons[activeType];
+}
+
+// src/components/list-dropdown-menu/list-menu-item.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ListMenuItem = (0, import_react9.forwardRef)(
+  ({ editor, listType }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = useList({
+      editor,
+      type: listType
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      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__ */ (0, import_jsx_runtime11.jsx)(Icon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+ListMenuItem.displayName = "ListMenuItem";
+
+// src/components/list-dropdown-menu/list-dropdown-menu.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ListDropdownMenu = (0, import_react10.forwardRef)(
+  ({
+    editor,
+    types = ["bulletList", "orderedList", "taskList"],
+    ...buttonProps
+  }, ref) => {
+    const activeType = useActiveListType(editor, types);
+    const TriggerIcon = getListTriggerIcon(activeType);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        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__ */ (0, import_jsx_runtime12.jsx)(
+              TriggerIcon,
+              {
+                className: activeType !== null ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ChevronDown, { className: "nt:size-3" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuGroup, { children: types.map((type) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ListMenuItem, { editor, listType: type }, type)) }) })
+    ] });
+  }
+);
+ListDropdownMenu.displayName = "ListDropdownMenu";
+
+// src/components/mark-button/mark-button.tsx
+var import_react12 = require("react");
+
+// src/components/mark-button/use-mark.ts
+var import_lucide_react9 = require("lucide-react");
+var import_react11 = require("react");
+var markLabels = {
+  bold: "Bold",
+  italic: "Italic",
+  strike: "Strikethrough",
+  code: "Code"
+};
+var markIcons = {
+  bold: import_lucide_react9.Bold,
+  italic: import_lucide_react9.Italic,
+  strike: import_lucide_react9.Strikethrough,
+  code: import_lucide_react9.Code
+};
+function useMark({ editor, type }) {
+  const [isActive, setIsActive] = (0, import_react11.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    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 = (0, import_react11.useCallback)(() => {
+    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
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MarkButton = (0, import_react12.forwardRef)(
+  ({ editor, type, onClick, ...buttonProps }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = useMark({
+      editor,
+      type
+    });
+    const handleClick = (0, import_react12.useCallback)(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleToggle();
+      },
+      [handleToggle, onClick]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      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__ */ (0, import_jsx_runtime13.jsx)(
+          Icon,
+          {
+            className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+          }
+        )
+      }
+    );
+  }
+);
+MarkButton.displayName = "MarkButton";
+
+// src/components/toolbar/toolbar.tsx
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Toolbar = (0, import_react13.forwardRef)(
+  ({ children, className, variant = "fixed", ...props }, ref) => {
+    const classNames = ["tiptap-toolbar", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "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__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, role: "group", ...props, children });
+}
+function ToolbarSeparator({
+  orientation = "vertical",
+  className,
+  ...props
+}) {
+  const classNames = ["tiptap-separator", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      "aria-orientation": orientation === "vertical" ? orientation : void 0,
+      className: classNames,
+      "data-orientation": orientation,
+      role: "separator",
+      ...props
+    }
+  );
+}
+
+// src/components/ui-primitive/spacer.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Spacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { flex: 1 } });
+}
+
+// src/components/undo-redo-button/undo-redo-button.tsx
+var import_react15 = require("react");
+
+// src/components/undo-redo-button/use-undo-redo.ts
+var import_lucide_react10 = require("lucide-react");
+var import_react14 = require("react");
+var actionLabels = {
+  undo: "Undo",
+  redo: "Redo"
+};
+var actionIcons = {
+  undo: import_lucide_react10.Undo2,
+  redo: import_lucide_react10.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] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    if (!editor) return;
+    const handleUpdate = () => {
+      setCanExecute(canExecuteAction(editor, action));
+    };
+    handleUpdate();
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor, action]);
+  const handleAction = (0, import_react14.useCallback)(() => {
+    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
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var UndoRedoButton = (0, import_react15.forwardRef)(({ editor, action, onClick, ...buttonProps }, ref) => {
+  const { canExecute, handleAction, label, Icon } = useUndoRedo({
+    editor,
+    action
+  });
+  const handleClick = (0, import_react15.useCallback)(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      handleAction();
+    },
+    [handleAction, onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Button,
+    {
+      ref,
+      "aria-label": label,
+      disabled: !canExecute,
+      size: "icon",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: handleClick,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {})
+    }
+  );
+});
+UndoRedoButton.displayName = "UndoRedoButton";
+
+// src/hooks/use-markdown-editor.ts
+var import_state = require("@tiptap/pm/state");
+var import_react16 = require("@tiptap/react");
+var import_react17 = require("react");
 
 // src/extensions/shared.ts
 var import_extension_list = require("@tiptap/extension-list");
@@ -91,10 +1122,10 @@ function useMarkdownEditor({
   onChange,
   editable = true
 }) {
-  const externalValue = (0, import_react2.useRef)(value);
-  const onChangeRef = (0, import_react2.useRef)(onChange);
+  const externalValue = (0, import_react17.useRef)(value);
+  const onChangeRef = (0, import_react17.useRef)(onChange);
   onChangeRef.current = onChange;
-  const editor = (0, import_react.useEditor)({
+  const editor = (0, import_react16.useEditor)({
     extensions: editorExtensions,
     editable,
     content: value,
@@ -104,15 +1135,28 @@ function useMarkdownEditor({
       );
       externalValue.current = md;
       onChangeRef.current(md);
+    },
+    onCreate({ editor: editor2 }) {
+      setTimeout(() => {
+        if (editor2.isDestroyed) return;
+        const { state } = editor2;
+        const freshState = import_state.EditorState.create({
+          doc: state.doc,
+          selection: state.selection,
+          plugins: state.plugins
+        });
+        editor2.view.updateState(freshState);
+        editor2.view.dispatch(editor2.view.state.tr);
+      }, 0);
     }
   });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!editor) return;
     if (value === externalValue.current) return;
     externalValue.current = value;
     editor.commands.setContent(value);
   }, [value, editor]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!editor) return;
     editor.setEditable(editable);
   }, [editable, editor]);
@@ -120,7 +1164,7 @@ function useMarkdownEditor({
 }
 
 // src/notra-editor.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function NotraEditor({
   value,
   onChange,
@@ -135,11 +1179,42 @@ function NotraEditor({
     editable: !readOnly
   });
   const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.EditorContent, { editor }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: classNames, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Toolbar, { variant: "fixed", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spacer, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolbarGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoRedoButton, { action: "undo", editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoRedoButton, { action: "redo", editor })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolbarGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeadingDropdownMenu, { editor, levels: [1, 2, 3, 4] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ListDropdownMenu,
+          {
+            editor,
+            types: ["bulletList", "orderedList", "taskList"]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockquoteButton, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlockButton, { editor })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolbarGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { editor, type: "bold" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { editor, type: "italic" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { editor, type: "strike" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { editor, type: "code" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkPopover, { editor })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spacer, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react18.EditorContent, { className: "notra-editor-content", editor })
+  ] });
 }
 
 // src/notra-reader.tsx
-var import_react4 = require("@tiptap/static-renderer/pm/react");
+var import_react19 = require("@tiptap/static-renderer/pm/react");
 
 // src/utils/markdown-to-json.ts
 var import_core = require("@tiptap/core");
@@ -165,19 +1240,123 @@ function markdownToJSON(markdown) {
 }
 
 // src/notra-reader.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function NotraReader({ content, className }) {
   const json = markdownToJSON(content);
-  const rendered = (0, import_react4.renderToReactElement)({
+  const rendered = (0, import_react19.renderToReactElement)({
     extensions: sharedExtensions,
     content: json
   });
   const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classNames, children: rendered });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, children: rendered });
+}
+
+// src/components/ui-primitive/dropdown-menu.tsx
+var import_react20 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DropdownMenu2({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react20.useState)(false);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const triggerRef = (0, import_react20.useRef)(null);
+  const contentRef = (0, import_react20.useRef)(null);
+  const [position, setPosition] = (0, import_react20.useState)({ top: 0, left: 0 });
+  const setOpen = (value) => {
+    if (!isControlled) {
+      setUncontrolledOpen(value);
+    }
+    onOpenChange?.(value);
+  };
+  (0, import_react20.useEffect)(() => {
+    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]);
+  (0, import_react20.useEffect)(() => {
+    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]);
+  (0, import_react20.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
+    open && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "notra-editor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          ref: contentRef,
+          className: "tiptap-dropdown-menu-content",
+          "data-state": "open",
+          role: "menu",
+          style: {
+            position: "fixed",
+            top: position.top,
+            left: position.left
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
+            {
+              className: "tiptap-dropdown-menu-group",
+              onClick: () => setOpen(false),
+              children
+            }
+          )
+        }
+      ) }),
+      document.body
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BlockquoteButton,
+  CodeBlockButton,
+  DropdownMenu,
+  HeadingDropdownMenu,
+  LinkPopover,
+  ListDropdownMenu,
+  MarkButton,
   NotraEditor,
-  NotraReader
+  NotraReader,
+  Spacer,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  UndoRedoButton
 });
 //# sourceMappingURL=index.cjs.map