notra-editor 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,1336 +15,40 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// 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,
-  Spacer: () => Spacer,
-  Toolbar: () => Toolbar,
-  ToolbarGroup: () => ToolbarGroup,
-  ToolbarSeparator: () => ToolbarSeparator,
-  UndoRedoButton: () => UndoRedoButton
+  BlockquoteButton: () => import_blockquote_button.BlockquoteButton,
+  CodeBlockButton: () => import_code_block_button.CodeBlockButton,
+  HeadingDropdownMenu: () => import_heading_dropdown_menu.HeadingDropdownMenu,
+  LinkPopover: () => import_link_popover.LinkPopover,
+  ListDropdownMenu: () => import_list_dropdown_menu.ListDropdownMenu,
+  MarkButton: () => import_mark_button.MarkButton,
+  NotraEditor: () => import_notra_editor.NotraEditor,
+  NotraReader: () => import_notra_reader.NotraReader,
+  Spacer: () => import_spacer.Spacer,
+  Toolbar: () => import_toolbar.Toolbar,
+  ToolbarGroup: () => import_toolbar.ToolbarGroup,
+  ToolbarSeparator: () => import_toolbar.ToolbarSeparator,
+  UndoRedoButton: () => import_undo_redo_button.UndoRedoButton
 });
 module.exports = __toCommonJS(index_exports);
 var import_globals = require("./styles/globals.css");
-
-// src/notra-editor.tsx
-var import_react18 = 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");
-var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
-var starterKitBaseConfig = {
-  heading: { levels: [1, 2, 3, 4, 5, 6] },
-  link: {
-    openOnClick: false,
-    autolink: true
-  },
-  // Disable StarterKit's built-in list handling; use @tiptap/extension-list instead
-  bulletList: false,
-  orderedList: false,
-  listItem: false,
-  listKeymap: false
-};
-var sharedExtensions = [
-  import_starter_kit.default.configure({
-    ...starterKitBaseConfig,
-    dropcursor: false,
-    gapcursor: false,
-    undoRedo: false,
-    trailingNode: false
-  }),
-  import_extension_list.ListKit
-];
-
-// src/extensions/editor.ts
-var import_extension_list2 = require("@tiptap/extension-list");
-var import_starter_kit2 = __toESM(require("@tiptap/starter-kit"), 1);
-var import_tiptap_markdown = require("tiptap-markdown");
-var editorExtensions = [
-  import_starter_kit2.default.configure(starterKitBaseConfig),
-  import_extension_list2.ListKit,
-  import_tiptap_markdown.Markdown.configure({
-    html: false,
-    transformPastedText: true,
-    transformCopiedText: true
-  })
-];
-
-// src/hooks/use-markdown-editor.ts
-function getMarkdown(storage) {
-  return storage.markdown.getMarkdown();
-}
-function useMarkdownEditor({
-  value,
-  onChange,
-  editable = true
-}) {
-  const externalValue = (0, import_react17.useRef)(value);
-  const onChangeRef = (0, import_react17.useRef)(onChange);
-  onChangeRef.current = onChange;
-  const editor = (0, import_react16.useEditor)({
-    extensions: editorExtensions,
-    editable,
-    content: value,
-    onUpdate({ editor: editor2 }) {
-      const md = getMarkdown(
-        editor2.storage
-      );
-      externalValue.current = md;
-      onChangeRef.current(md);
-    },
-    onCreate({ editor: editor2 }) {
-      setTimeout(() => {
-        if (editor2.isDestroyed) return;
-        const { state } = editor2;
-        const freshState = 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_react17.useEffect)(() => {
-    if (!editor) return;
-    if (value === externalValue.current) return;
-    externalValue.current = value;
-    editor.commands.setContent(value);
-  }, [value, editor]);
-  (0, import_react17.useEffect)(() => {
-    if (!editor) return;
-    editor.setEditable(editable);
-  }, [editable, editor]);
-  return { editor };
-}
-
-// src/notra-editor.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function NotraEditor({
-  value,
-  onChange,
-  placeholder,
-  readOnly = false,
-  className
-}) {
-  const { editor } = useMarkdownEditor({
-    value,
-    onChange,
-    placeholder,
-    editable: !readOnly
-  });
-  const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (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_react19 = require("@tiptap/static-renderer/pm/react");
-
-// src/utils/markdown-to-json.ts
-var import_core = require("@tiptap/core");
-var import_tiptap_markdown2 = require("tiptap-markdown");
-var parserExtensions = [
-  ...sharedExtensions,
-  import_tiptap_markdown2.Markdown.configure({ html: false })
-];
-var parserEditor = null;
-function getParserEditor() {
-  if (!parserEditor) {
-    parserEditor = new import_core.Editor({
-      extensions: parserExtensions,
-      content: ""
-    });
-  }
-  return parserEditor;
-}
-function markdownToJSON(markdown) {
-  const editor = getParserEditor();
-  editor.commands.setContent(markdown);
-  return editor.getJSON();
-}
-
-// src/notra-reader.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function NotraReader({ content, className }) {
-  const json = markdownToJSON(content);
-  const rendered = (0, import_react19.renderToReactElement)({
-    extensions: sharedExtensions,
-    content: json
-  });
-  const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
-  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
-    )
-  ] });
-}
+var import_notra_editor = require("./notra-editor");
+var import_notra_reader = require("./notra-reader");
+var import_toolbar = require("./components/toolbar/toolbar");
+var import_undo_redo_button = require("./components/undo-redo-button/undo-redo-button");
+var import_spacer = require("./components/ui/spacer");
+var import_mark_button = require("./components/mark-button/mark-button");
+var import_heading_dropdown_menu = require("./components/heading-dropdown-menu/heading-dropdown-menu");
+var import_list_dropdown_menu = require("./components/list-dropdown-menu/list-dropdown-menu");
+var import_blockquote_button = require("./components/blockquote-button/blockquote-button");
+var import_code_block_button = require("./components/code-block-button/code-block-button");
+var import_link_popover = require("./components/link-popover/link-popover");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlockquoteButton,
   CodeBlockButton,
-  DropdownMenu,
   HeadingDropdownMenu,
   LinkPopover,
   ListDropdownMenu,