notra-editor 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -1,9 +1,1035 @@
+// 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 {
+  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, useRef } from "react";
+import { useEffect as useEffect9, useRef } from "react";
 
 // src/extensions/shared.ts
 import { ListKit } from "@tiptap/extension-list";
@@ -67,15 +1093,28 @@ function useMarkdownEditor({
       );
       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);
     }
   });
-  useEffect(() => {
+  useEffect9(() => {
     if (!editor) return;
     if (value === externalValue.current) return;
     externalValue.current = value;
     editor.commands.setContent(value);
   }, [value, editor]);
-  useEffect(() => {
+  useEffect9(() => {
     if (!editor) return;
     editor.setEditable(editable);
   }, [editable, editor]);
@@ -83,7 +1122,7 @@ function useMarkdownEditor({
 }
 
 // src/notra-editor.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 function NotraEditor({
   value,
   onChange,
@@ -98,7 +1137,38 @@ function NotraEditor({
     editable: !readOnly
   });
   const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+  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
@@ -128,7 +1198,7 @@ function markdownToJSON(markdown) {
 }
 
 // src/notra-reader.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function NotraReader({ content, className }) {
   const json = markdownToJSON(content);
   const rendered = renderToReactElement({
@@ -136,10 +1206,114 @@ function NotraReader({ content, className }) {
     content: json
   });
   const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx2("div", { className: classNames, children: rendered });
+  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
+    )
+  ] });
 }
 export {
+  BlockquoteButton,
+  CodeBlockButton,
+  DropdownMenu2 as DropdownMenu,
+  HeadingDropdownMenu,
+  LinkPopover,
+  ListDropdownMenu,
+  MarkButton,
   NotraEditor,
-  NotraReader
+  NotraReader,
+  Spacer,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  UndoRedoButton
 };
 //# sourceMappingURL=index.mjs.map