notra-editor 0.8.0 → 0.8.1

package/dist/components/link-popover/link-popover.cjs

@@ -91,7 +91,7 @@ const LinkPopover = (0, import_react.forwardRef)(
         import_popover.PopoverContent,
         {
           align: "start",
-          className: "nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1",
+          className: "nt:flex nt:w-auto nt:flex-row nt:items-center nt:gap-1 nt:p-1",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_input.Input,

package/dist/components/link-popover/link-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetLink,\n\t\t\tremoveLink,\n\t\t\topenLink,\n\t\t\twasSelectionMove\n\t\t} = useLinkPopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing link (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFM;AAhFN,0BAKO;AACP,mBAA6D;AAE7D,8BAA+B;AAC/B,oBAAuB;AACvB,mBAAsB;AACtB,qBAAwD;AACxD,uBAA0B;AAWnB,MAAM,kBAAc;AAAA,EAC1B,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ;AACpC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,QAAI,wCAAe,EAAE,OAAO,CAAC;AAG7B,gCAAU,MAAM;AACf,UAAI,YAAY,kBAAkB;AACjC,kBAAU,IAAI;AAAA,MACf;AAAA,IACD,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,UAAM,oBAAgB,0BAAY,MAAM;AACvC,cAAQ;AACR,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,uBAAmB,0BAAY,MAAM;AAC1C,iBAAW;AACX,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,UAAU,CAAC;AAEf,UAAM,oBAAgB;AAAA,MACrB,CAAC,UAAiD;AACjD,YAAI,MAAM,QAAQ,SAAS;AAC1B,gBAAM,eAAe;AACrB,wBAAc;AAAA,QACf;AAAA,MACD;AAAA,MACA,CAAC,aAAa;AAAA,IACf;AAEA,WACC,6CAAC,0BAAQ,MAAM,QAAQ,cAAc,WACpC;AAAA,kDAAC,iCAAe,SAAO,MACtB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,gBAAc;AAAA,UACd,qBAAmB,WAAW,OAAO;AAAA,UACrC,UAAU,CAAC;AAAA,UACX,MAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA,YAAC,oBAAAA;AAAA,YAAA;AAAA,cACA,WACC,WAAW,wCAAwC;AAAA;AAAA,UAErD;AAAA;AAAA,MACD,GACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAS;AAAA,gBACT,WAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA,gBACtC,WAAW;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,UAAU,CAAC,OAAO,CAAC;AAAA,gBACnB,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,sCAAe;AAAA;AAAA,YACjB;AAAA,YACA,4CAAC,8BAAU,WAAU,UAAS,aAAY,YAAW;AAAA,YACrD;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,oCAAa;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,8BAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AACD;AAEA,YAAY,cAAc;","names":["LinkIcon"]}
+{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetLink,\n\t\t\tremoveLink,\n\t\t\topenLink,\n\t\t\twasSelectionMove\n\t\t} = useLinkPopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing link (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:flex-row nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFM;AAhFN,0BAKO;AACP,mBAA6D;AAE7D,8BAA+B;AAC/B,oBAAuB;AACvB,mBAAsB;AACtB,qBAAwD;AACxD,uBAA0B;AAWnB,MAAM,kBAAc;AAAA,EAC1B,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ;AACpC,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,QAAI,wCAAe,EAAE,OAAO,CAAC;AAG7B,gCAAU,MAAM;AACf,UAAI,YAAY,kBAAkB;AACjC,kBAAU,IAAI;AAAA,MACf;AAAA,IACD,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,UAAM,oBAAgB,0BAAY,MAAM;AACvC,cAAQ;AACR,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,uBAAmB,0BAAY,MAAM;AAC1C,iBAAW;AACX,gBAAU,KAAK;AAAA,IAChB,GAAG,CAAC,UAAU,CAAC;AAEf,UAAM,oBAAgB;AAAA,MACrB,CAAC,UAAiD;AACjD,YAAI,MAAM,QAAQ,SAAS;AAC1B,gBAAM,eAAe;AACrB,wBAAc;AAAA,QACf;AAAA,MACD;AAAA,MACA,CAAC,aAAa;AAAA,IACf;AAEA,WACC,6CAAC,0BAAQ,MAAM,QAAQ,cAAc,WACpC;AAAA,kDAAC,iCAAe,SAAO,MACtB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,gBAAc;AAAA,UACd,qBAAmB,WAAW,OAAO;AAAA,UACrC,UAAU,CAAC;AAAA,UACX,MAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA,YAAC,oBAAAA;AAAA,YAAA;AAAA,cACA,WACC,WAAW,wCAAwC;AAAA;AAAA,UAErD;AAAA;AAAA,MACD,GACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAS;AAAA,gBACT,WAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA,gBACtC,WAAW;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,UAAU,CAAC,OAAO,CAAC;AAAA,gBACnB,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,sCAAe;AAAA;AAAA,YACjB;AAAA,YACA,4CAAC,8BAAU,WAAU,UAAS,aAAY,YAAW;AAAA,YACrD;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,oCAAa;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,cAAW;AAAA,gBACX,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAET,sDAAC,8BAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AACD;AAEA,YAAY,cAAc;","names":["LinkIcon"]}

package/dist/components/link-popover/link-popover.mjs

@@ -73,7 +73,7 @@ const LinkPopover = forwardRef(
         PopoverContent,
         {
           align: "start",
-          className: "nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1",
+          className: "nt:flex nt:w-auto nt:flex-row nt:items-center nt:gap-1 nt:p-1",
           children: [
             /* @__PURE__ */ jsx(
               Input,

package/dist/components/link-popover/link-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetLink,\n\t\t\tremoveLink,\n\t\t\topenLink,\n\t\t\twasSelectionMove\n\t\t} = useLinkPopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing link (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/link-popover/link-popover.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tCornerDownLeft,\n\tExternalLink,\n\tLink as LinkIcon,\n\tTrash2\n} from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useLinkPopover } from './use-link-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface LinkPopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetLink,\n\t\t\tremoveLink,\n\t\t\topenLink,\n\t\t\twasSelectionMove\n\t\t} = useLinkPopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing link (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetLink = useCallback(() => {\n\t\t\tsetLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [setLink]);\n\n\t\tconst handleRemoveLink = useCallback(() => {\n\t\t\tremoveLink();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeLink]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetLink();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetLink]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Link\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-auto nt:flex-row nt:items-center nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:min-w-48 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste a link...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Apply link\"\n\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleSetLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Open link in new window\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={openLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ExternalLink />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\taria-label=\"Remove link\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tonClick={handleRemoveLink}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nLinkPopover.displayName = 'LinkPopover';\n"],"mappings":"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","names":[]}

package/dist/styles/globals.css

@@ -396,6 +396,9 @@
   .nt\:flex-col-reverse {
     flex-direction: column-reverse;
   }
+  .nt\:flex-row {
+    flex-direction: row;
+  }
   .nt\:items-center {
     align-items: center;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notra-editor",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A Markdown-first rich text editor for React",
   "license": "MIT",
   "keywords": [