@particle-academy/react-fancy 5.60.2 → 5.61.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +81 -0
- package/dist/autocomplete.cjs +4 -3
- package/dist/autocomplete.js +3 -2
- package/dist/{chunk-EEMNTO7L.cjs → chunk-3DMVK74Q.cjs} +4 -4
- package/dist/{chunk-EEMNTO7L.cjs.map → chunk-3DMVK74Q.cjs.map} +1 -1
- package/dist/{chunk-M77BB2QI.cjs → chunk-3I6PE2US.cjs} +12 -12
- package/dist/{chunk-M77BB2QI.cjs.map → chunk-3I6PE2US.cjs.map} +1 -1
- package/dist/{chunk-TGBLDJ72.js → chunk-4FJWHVC7.js} +3 -3
- package/dist/{chunk-TGBLDJ72.js.map → chunk-4FJWHVC7.js.map} +1 -1
- package/dist/{chunk-EXQ33MJR.cjs → chunk-4HUD33OP.cjs} +4 -4
- package/dist/{chunk-EXQ33MJR.cjs.map → chunk-4HUD33OP.cjs.map} +1 -1
- package/dist/chunk-4JLFIPHZ.js +43 -0
- package/dist/chunk-4JLFIPHZ.js.map +1 -0
- package/dist/{chunk-YQTKTEWS.js → chunk-5JFA7NYE.js} +3 -3
- package/dist/{chunk-YQTKTEWS.js.map → chunk-5JFA7NYE.js.map} +1 -1
- package/dist/chunk-5VMILVWD.js +3 -0
- package/dist/chunk-5VMILVWD.js.map +1 -0
- package/dist/chunk-645CRPU6.cjs +53 -0
- package/dist/chunk-645CRPU6.cjs.map +1 -0
- package/dist/{chunk-DN244T6G.cjs → chunk-6GBO7R25.cjs} +4 -4
- package/dist/{chunk-DN244T6G.cjs.map → chunk-6GBO7R25.cjs.map} +1 -1
- package/dist/{chunk-4FZOH7BJ.js → chunk-74MEJWMH.js} +3 -3
- package/dist/{chunk-4FZOH7BJ.js.map → chunk-74MEJWMH.js.map} +1 -1
- package/dist/{chunk-4DGXL6JC.cjs → chunk-7KTBVKNO.cjs} +4 -4
- package/dist/{chunk-4DGXL6JC.cjs.map → chunk-7KTBVKNO.cjs.map} +1 -1
- package/dist/{chunk-XQDGUXMS.js → chunk-BHUSI56C.js} +3 -3
- package/dist/{chunk-XQDGUXMS.js.map → chunk-BHUSI56C.js.map} +1 -1
- package/dist/{chunk-VD3C7IA4.js → chunk-BLS2IGPY.js} +48 -13
- package/dist/chunk-BLS2IGPY.js.map +1 -0
- package/dist/{chunk-XAQQX7J2.cjs → chunk-BMVYOVSW.cjs} +48 -13
- package/dist/chunk-BMVYOVSW.cjs.map +1 -0
- package/dist/{chunk-UIE5FP3A.js → chunk-BQFPC5FL.js} +3 -3
- package/dist/{chunk-UIE5FP3A.js.map → chunk-BQFPC5FL.js.map} +1 -1
- package/dist/chunk-CHQH6M67.js +297 -0
- package/dist/chunk-CHQH6M67.js.map +1 -0
- package/dist/{chunk-UZG6LO4Z.cjs → chunk-FU6K7XXZ.cjs} +4 -4
- package/dist/{chunk-UZG6LO4Z.cjs.map → chunk-FU6K7XXZ.cjs.map} +1 -1
- package/dist/{chunk-5ZNOLPIJ.cjs → chunk-H2YRZYKK.cjs} +5 -5
- package/dist/{chunk-5ZNOLPIJ.cjs.map → chunk-H2YRZYKK.cjs.map} +1 -1
- package/dist/{chunk-7R7HENZG.cjs → chunk-HRYM76ZE.cjs} +9 -9
- package/dist/{chunk-7R7HENZG.cjs.map → chunk-HRYM76ZE.cjs.map} +1 -1
- package/dist/{chunk-ZGQEKDG6.js → chunk-IHQHTJNN.js} +5 -5
- package/dist/{chunk-ZGQEKDG6.js.map → chunk-IHQHTJNN.js.map} +1 -1
- package/dist/{chunk-6HJF55U7.js → chunk-IY6LVALS.js} +3 -3
- package/dist/{chunk-6HJF55U7.js.map → chunk-IY6LVALS.js.map} +1 -1
- package/dist/{chunk-HTNQ5XUR.cjs → chunk-J4FKJ4IR.cjs} +4 -4
- package/dist/{chunk-HTNQ5XUR.cjs.map → chunk-J4FKJ4IR.cjs.map} +1 -1
- package/dist/{chunk-43ZRUYJC.cjs → chunk-JOWAS5A5.cjs} +9 -9
- package/dist/{chunk-43ZRUYJC.cjs.map → chunk-JOWAS5A5.cjs.map} +1 -1
- package/dist/{chunk-JRRYYW3Y.cjs → chunk-K6NADZ7O.cjs} +6 -6
- package/dist/{chunk-JRRYYW3Y.cjs.map → chunk-K6NADZ7O.cjs.map} +1 -1
- package/dist/{chunk-5JA4ENMF.js → chunk-LMOPAY7Q.js} +3 -3
- package/dist/{chunk-5JA4ENMF.js.map → chunk-LMOPAY7Q.js.map} +1 -1
- package/dist/{chunk-DAJPPKPO.js → chunk-M52S3TFI.js} +3 -3
- package/dist/{chunk-DAJPPKPO.js.map → chunk-M52S3TFI.js.map} +1 -1
- package/dist/{chunk-GLGUQGAQ.cjs → chunk-M6MGQI6G.cjs} +4 -4
- package/dist/{chunk-GLGUQGAQ.cjs.map → chunk-M6MGQI6G.cjs.map} +1 -1
- package/dist/chunk-MKHYENKR.cjs +4 -0
- package/dist/chunk-MKHYENKR.cjs.map +1 -0
- package/dist/{chunk-NHGU2BWT.js → chunk-MSGKIWYX.js} +3 -3
- package/dist/{chunk-NHGU2BWT.js.map → chunk-MSGKIWYX.js.map} +1 -1
- package/dist/{chunk-KQYOIPHQ.js → chunk-N7KUGFRG.js} +4 -4
- package/dist/{chunk-KQYOIPHQ.js.map → chunk-N7KUGFRG.js.map} +1 -1
- package/dist/{chunk-XB3H2EEL.js → chunk-NDLESFUH.js} +3 -3
- package/dist/{chunk-XB3H2EEL.js.map → chunk-NDLESFUH.js.map} +1 -1
- package/dist/chunk-NFTTNFQR.js +51 -0
- package/dist/chunk-NFTTNFQR.js.map +1 -0
- package/dist/{chunk-XYOT75HH.js → chunk-NORVXHRU.js} +3 -3
- package/dist/{chunk-XYOT75HH.js.map → chunk-NORVXHRU.js.map} +1 -1
- package/dist/{chunk-5H6IUCOD.cjs → chunk-P6V4QWJK.cjs} +4 -4
- package/dist/{chunk-5H6IUCOD.cjs.map → chunk-P6V4QWJK.cjs.map} +1 -1
- package/dist/{chunk-LZHGXRFD.js → chunk-PKFEJWVI.js} +3 -3
- package/dist/{chunk-LZHGXRFD.js.map → chunk-PKFEJWVI.js.map} +1 -1
- package/dist/{chunk-BJKKW77L.cjs → chunk-QXMQVLRQ.cjs} +4 -4
- package/dist/{chunk-BJKKW77L.cjs.map → chunk-QXMQVLRQ.cjs.map} +1 -1
- package/dist/{chunk-WHEXTDPV.js → chunk-RBCMKPBX.js} +7 -5
- package/dist/chunk-RBCMKPBX.js.map +1 -0
- package/dist/{chunk-LVE6ERRS.cjs → chunk-RRMQGTVB.cjs} +6 -6
- package/dist/{chunk-LVE6ERRS.cjs.map → chunk-RRMQGTVB.cjs.map} +1 -1
- package/dist/{chunk-T67FLC55.js → chunk-SHF44YGG.js} +3 -3
- package/dist/{chunk-T67FLC55.js.map → chunk-SHF44YGG.js.map} +1 -1
- package/dist/{chunk-NBZC6LOB.cjs → chunk-TI7D4QDM.cjs} +6 -3
- package/dist/chunk-TI7D4QDM.cjs.map +1 -0
- package/dist/{chunk-5JK2VDWY.cjs → chunk-TYTENEJQ.cjs} +6 -6
- package/dist/{chunk-5JK2VDWY.cjs.map → chunk-TYTENEJQ.cjs.map} +1 -1
- package/dist/{chunk-WW56U3RV.js → chunk-UBEOB55O.js} +3 -3
- package/dist/{chunk-WW56U3RV.js.map → chunk-UBEOB55O.js.map} +1 -1
- package/dist/{chunk-M6XBF2ZS.js → chunk-UJZJBHMH.js} +3 -3
- package/dist/{chunk-M6XBF2ZS.js.map → chunk-UJZJBHMH.js.map} +1 -1
- package/dist/{chunk-T45LBTXH.js → chunk-ULG4OA2T.js} +3 -3
- package/dist/{chunk-T45LBTXH.js.map → chunk-ULG4OA2T.js.map} +1 -1
- package/dist/{chunk-SIEPD6NR.cjs → chunk-UM4JXBRZ.cjs} +4 -4
- package/dist/{chunk-SIEPD6NR.cjs.map → chunk-UM4JXBRZ.cjs.map} +1 -1
- package/dist/chunk-X6TGRSVH.cjs +299 -0
- package/dist/chunk-X6TGRSVH.cjs.map +1 -0
- package/dist/{chunk-FGI2EC32.cjs → chunk-Z5OTOYWI.cjs} +4 -4
- package/dist/{chunk-FGI2EC32.cjs.map → chunk-Z5OTOYWI.cjs.map} +1 -1
- package/dist/chunk-ZPBCZPMD.cjs +48 -0
- package/dist/chunk-ZPBCZPMD.cjs.map +1 -0
- package/dist/command.cjs +5 -4
- package/dist/command.js +3 -2
- package/dist/composer.cjs +7 -6
- package/dist/composer.js +5 -4
- package/dist/context-menu.cjs +5 -4
- package/dist/context-menu.js +3 -2
- package/dist/drawer.cjs +5 -4
- package/dist/drawer.js +3 -2
- package/dist/dropdown.cjs +5 -4
- package/dist/dropdown.js +3 -2
- package/dist/editor.cjs +8 -3
- package/dist/editor.d.cts +53 -4
- package/dist/editor.d.ts +53 -4
- package/dist/editor.js +6 -1
- package/dist/full-screen.cjs +39 -0
- package/dist/full-screen.cjs.map +1 -0
- package/dist/full-screen.d.cts +54 -0
- package/dist/full-screen.d.ts +54 -0
- package/dist/full-screen.js +10 -0
- package/dist/full-screen.js.map +1 -0
- package/dist/index.cjs +152 -120
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +35 -31
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +6 -5
- package/dist/input.js +5 -4
- package/dist/inputs.cjs +17 -16
- package/dist/inputs.js +9 -8
- package/dist/json-editor.cjs +19 -18
- package/dist/json-editor.js +8 -7
- package/dist/magic-wand.cjs +4 -3
- package/dist/magic-wand.js +3 -2
- package/dist/mobile-menu.cjs +6 -4
- package/dist/mobile-menu.js +4 -2
- package/dist/modal.cjs +5 -4
- package/dist/modal.js +3 -2
- package/dist/paste-pills.cjs +17 -16
- package/dist/paste-pills.js +4 -3
- package/dist/popover.cjs +5 -4
- package/dist/popover.js +3 -2
- package/dist/portal.cjs +7 -2
- package/dist/portal.d.cts +12 -1
- package/dist/portal.d.ts +12 -1
- package/dist/portal.js +2 -1
- package/dist/prompt-input.cjs +7 -6
- package/dist/prompt-input.js +6 -5
- package/dist/reason-tag.cjs +5 -4
- package/dist/reason-tag.js +4 -3
- package/dist/select.cjs +4 -3
- package/dist/select.js +3 -2
- package/dist/sidebar.cjs +1 -0
- package/dist/sidebar.js +1 -0
- package/dist/styles.css +9 -0
- package/dist/styles.css.map +1 -1
- package/dist/toast.cjs +5 -4
- package/dist/toast.js +3 -2
- package/dist/tooltip.cjs +4 -3
- package/dist/tooltip.js +3 -2
- package/dist/use-full-screen-BUJ1ujG4.d.cts +94 -0
- package/dist/use-full-screen-BUJ1ujG4.d.ts +94 -0
- package/docs/Editor.md +24 -0
- package/docs/FullScreen.md +106 -0
- package/package.json +11 -1
- package/dist/chunk-NBZC6LOB.cjs.map +0 -1
- package/dist/chunk-VD3C7IA4.js.map +0 -1
- package/dist/chunk-WHEXTDPV.js.map +0 -1
- package/dist/chunk-XAQQX7J2.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":["forwardRef","Autocomplete","useControllableState","useFieldMode","useInlineEdit","useState","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useEffect","jsx","cn","jsxs","Portal","Fragment"],"mappings":"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","file":"chunk-4DGXL6JC.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { AutocompleteProps } from \"./Autocomplete.types\";\n\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSearch,\n options,\n placeholder,\n loading = false,\n emptyMessage = \"No results found.\",\n disabled = false,\n className,\n mode,\n },\n ref,\n ) {\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [query, setQuery] = useState(value);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const anchorRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, listRef, {\n placement: \"bottom-start\",\n offset: 4,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n useOutsideClick(wrapperRef, close, open);\n useEscapeKey(close, open);\n\n const filtered = options.filter((o) =>\n o.label.toLowerCase().includes(query.toLowerCase()),\n );\n\n const select = useCallback(\n (val: string) => {\n setValue(val);\n const opt = options.find((o) => o.value === val);\n setQuery(opt?.label ?? val);\n close();\n },\n [setValue, options, close],\n );\n\n useEffect(() => {\n onSearch?.(query);\n }, [query, onSearch]);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!open) {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n return;\n }\n return;\n }\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\" && activeIndex >= 0) {\n e.preventDefault();\n const item = filtered[activeIndex];\n if (item && !item.disabled) select(item.value);\n }\n };\n\n if (!showControl) {\n const matched = options.find((o) => o.value === value);\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n data-mode=\"view\"\n ref={wrapperRef}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n !value && \"text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {matched?.label ?? value ?? \"—\"}\n </div>\n );\n }\n\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n ref={wrapperRef}\n className={cn(\"relative\", className)}\n onBlur={(e) => {\n // Options live in a Portal; only exit when closed and focus left.\n if (interactive && !open && !e.currentTarget.contains(e.relatedTarget as Node)) {\n exitEdit();\n }\n }}\n >\n <input\n ref={(node) => {\n (anchorRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }}\n type=\"text\"\n value={query}\n onChange={(e) => {\n setQuery(e.target.value);\n setOpen(true);\n setActiveIndex(-1);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n autoFocus={interactive}\n role=\"combobox\"\n aria-expanded={open}\n aria-autocomplete=\"list\"\n className=\"w-full rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] placeholder:text-[color:var(--fancy-text-faint,var(--color-zinc-400))] outline-none transition-[border-color,box-shadow] duration-150 focus:border-[color:var(--fancy-focus,var(--color-blue-500))] focus:ring-2 focus:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))] dark:placeholder:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:focus:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\"\n />\n {open && (\n <Portal>\n <div\n ref={listRef}\n role=\"listbox\"\n className=\"fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:shadow-zinc-950/50 fancy-scale-in\"\n style={{\n left: position.x,\n top: position.y,\n width: anchorRef.current?.offsetWidth,\n }}\n >\n {loading ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">Loading...</div>\n ) : filtered.length === 0 ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">\n {emptyMessage}\n </div>\n ) : (\n filtered.map((option, i) => (\n <button\n key={option.value}\n type=\"button\"\n role=\"option\"\n aria-selected={i === activeIndex}\n disabled={option.disabled}\n onClick={() => select(option.value)}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200\",\n i === activeIndex\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n : \"hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))]\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <HighlightMatch text={option.label} query={query} />\n </button>\n ))\n )}\n </div>\n </Portal>\n )}\n </div>\n );\n },\n);\n\nfunction HighlightMatch({ text, query }: { text: string; query: string }) {\n if (!query) return <>{text}</>;\n\n const idx = text.toLowerCase().indexOf(query.toLowerCase());\n if (idx === -1) return <>{text}</>;\n\n return (\n <>\n {text.slice(0, idx)}\n <span className=\"font-semibold text-zinc-900 dark:text-white\">\n {text.slice(idx, idx + query.length)}\n </span>\n {text.slice(idx + query.length)}\n </>\n );\n}\n\nAutocomplete.displayName = \"Autocomplete\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":["forwardRef","Autocomplete","useControllableState","useFieldMode","useInlineEdit","useState","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useEffect","jsx","cn","jsxs","Portal","Fragment"],"mappings":";;;;;;;;;;;;;AAWO,IAAM,YAAA,GAAeA,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP;AAAA,IACE,KAAA,EAAO,eAAA;AAAA,IACP,YAAA,GAAe,EAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA,GAAU,KAAA;AAAA,IACV,YAAA,GAAe,mBAAA;AAAA,IACf,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,sCAAA;AAAA,MACxB,eAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,YAAA,GAAeC,+BAAa,IAAI,CAAA;AACtC,IAAA,MAAM,EAAE,aAAa,WAAA,EAAa,SAAA,EAAW,UAAS,GAAIC,+BAAA,CAAc,cAAc,QAAQ,CAAA;AAC9F,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,KAAK,CAAA;AACxC,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,KAAK,CAAA;AACtC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,EAAE,CAAA;AAEjD,IAAA,MAAM,SAAA,GAAYC,aAAyB,IAAI,CAAA;AAC/C,IAAA,MAAM,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAC3C,IAAA,MAAM,UAAA,GAAaA,aAAuB,IAAI,CAAA;AAE9C,IAAA,MAAM,QAAA,GAAWC,qCAAA,CAAoB,SAAA,EAAW,OAAA,EAAS;AAAA,MACvD,SAAA,EAAW,cAAA;AAAA,MACX,MAAA,EAAQ,CAAA;AAAA,MACR,OAAA,EAAS;AAAA,KACV,CAAA;AAED,IAAA,MAAM,KAAA,GAAQC,kBAAY,MAAM;AAC9B,MAAA,OAAA,CAAQ,KAAK,CAAA;AACb,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA,EAAG,EAAE,CAAA;AAEL,IAAAC,iCAAA,CAAgB,UAAA,EAAY,OAAO,IAAI,CAAA;AACvC,IAAAC,8BAAA,CAAa,OAAO,IAAI,CAAA;AAExB,IAAA,MAAM,WAAW,OAAA,CAAQ,MAAA;AAAA,MAAO,CAAC,MAC/B,CAAA,CAAE,KAAA,CAAM,aAAY,CAAE,QAAA,CAAS,KAAA,CAAM,WAAA,EAAa;AAAA,KACpD;AAEA,IAAA,MAAM,MAAA,GAASF,iBAAA;AAAA,MACb,CAAC,GAAA,KAAgB;AACf,QAAA,QAAA,CAAS,GAAG,CAAA;AACZ,QAAA,MAAM,MAAM,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,GAAG,CAAA;AAC/C,QAAA,QAAA,CAAS,GAAA,EAAK,SAAS,GAAG,CAAA;AAC1B,QAAA,KAAA,EAAM;AAAA,MACR,CAAA;AAAA,MACA,CAAC,QAAA,EAAU,OAAA,EAAS,KAAK;AAAA,KAC3B;AAEA,IAAAG,eAAA,CAAU,MAAM;AACd,MAAA,QAAA,GAAW,KAAK,CAAA;AAAA,IAClB,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEpB,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA2B;AAChD,MAAA,IAAI,CAAC,IAAA,EAAM;AACT,QAAA,IAAI,CAAA,CAAE,QAAQ,WAAA,EAAa;AACzB,UAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,UAAA;AAAA,QACF;AACA,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,CAAA,CAAE,QAAQ,WAAA,EAAa;AACzB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,CAAC,MAAM,IAAA,CAAK,GAAA,CAAI,IAAI,CAAA,EAAG,QAAA,CAAS,MAAA,GAAS,CAAC,CAAC,CAAA;AAAA,MAC5D,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,SAAA,EAAW;AAC9B,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,CAAC,CAAA,KAAM,IAAA,CAAK,IAAI,CAAA,GAAI,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,MAC1C,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,eAAe,CAAA,EAAG;AAChD,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAM,IAAA,GAAO,SAAS,WAAW,CAAA;AACjC,QAAA,IAAI,QAAQ,CAAC,IAAA,CAAK,QAAA,EAAU,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,MAC/C;AAAA,IACF,CAAA;AAEA,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA,MAAM,UAAU,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,KAAK,CAAA;AACrD,MAAA,uBACEC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,+BAAA,EAA8B,EAAA;AAAA,UAC9B,WAAA,EAAU,MAAA;AAAA,UACV,GAAA,EAAK,UAAA;AAAA,UACL,IAAA,EAAM,cAAc,QAAA,GAAW,MAAA;AAAA,UAC/B,QAAA,EAAU,cAAc,CAAA,GAAI,MAAA;AAAA,UAC5B,KAAA,EAAO,cAAc,eAAA,GAAkB,MAAA;AAAA,UACvC,OAAA,EAAS,cAAc,SAAA,GAAY,MAAA;AAAA,UACnC,SAAA,EACE,WAAA,GACI,CAAC,CAAA,KAAM;AACL,YAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,cAAA,CAAA,CAAE,cAAA,EAAe;AACjB,cAAA,SAAA,EAAU;AAAA,YACZ;AAAA,UACF,CAAA,GACA,MAAA;AAAA,UAEN,SAAA,EAAWC,oBAAA;AAAA,YACT,6HAAA;AAAA,YACA,CAAC,KAAA,IAAS,iIAAA;AAAA,YACV,WAAA,IACE,4PAAA;AAAA,YACF;AAAA,WACF;AAAA,UAEC,QAAA,EAAA,OAAA,EAAS,SAAS,KAAA,IAAS;AAAA;AAAA,OAC9B;AAAA,IAEJ;AAEA,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,+BAAA,EAA8B,EAAA;AAAA,QAC9B,GAAA,EAAK,UAAA;AAAA,QACL,SAAA,EAAWD,oBAAA,CAAG,UAAA,EAAY,SAAS,CAAA;AAAA,QACnC,MAAA,EAAQ,CAAC,CAAA,KAAM;AAEb,UAAA,IAAI,WAAA,IAAe,CAAC,IAAA,IAAQ,CAAC,EAAE,aAAA,CAAc,QAAA,CAAS,CAAA,CAAE,aAAqB,CAAA,EAAG;AAC9E,YAAA,QAAA,EAAS;AAAA,UACX;AAAA,QACF,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAD,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,gBAAC,UAA8D,OAAA,GAAU,IAAA;AACzE,gBAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA;AAAA,qBAAA,IAC9B,GAAA,EAAM,GAAA,CAAwD,OAAA,GAAU,IAAA;AAAA,cACnF,CAAA;AAAA,cACA,IAAA,EAAK,MAAA;AAAA,cACL,KAAA,EAAO,KAAA;AAAA,cACP,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AACvB,gBAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,gBAAA,cAAA,CAAe,EAAE,CAAA;AAAA,cACnB,CAAA;AAAA,cACA,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,cAC3B,SAAA,EAAW,aAAA;AAAA,cACX,WAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,WAAA;AAAA,cACX,IAAA,EAAK,UAAA;AAAA,cACL,eAAA,EAAe,IAAA;AAAA,cACf,mBAAA,EAAkB,MAAA;AAAA,cAClB,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,UACC,IAAA,mCACEG,wBAAA,EAAA,EACC,QAAA,kBAAAH,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,OAAA;AAAA,cACL,IAAA,EAAK,SAAA;AAAA,cACL,SAAA,EAAU,wWAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,MAAM,QAAA,CAAS,CAAA;AAAA,gBACf,KAAK,QAAA,CAAS,CAAA;AAAA,gBACd,KAAA,EAAO,UAAU,OAAA,EAAS;AAAA,eAC5B;AAAA,cAEC,QAAA,EAAA,OAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAkC,QAAA,EAAA,YAAA,EAAU,CAAA,GACzD,SAAS,MAAA,KAAW,CAAA,kCACrB,KAAA,EAAA,EAAI,SAAA,EAAU,mCACZ,QAAA,EAAA,YAAA,EACH,CAAA,GAEA,SAAS,GAAA,CAAI,CAAC,QAAQ,CAAA,qBACpBA,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBAEC,IAAA,EAAK,QAAA;AAAA,kBACL,IAAA,EAAK,QAAA;AAAA,kBACL,iBAAe,CAAA,KAAM,WAAA;AAAA,kBACrB,UAAU,MAAA,CAAO,QAAA;AAAA,kBACjB,OAAA,EAAS,MAAM,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA;AAAA,kBAClC,SAAA,EAAWC,oBAAA;AAAA,oBACT,oHAAA;AAAA,oBACA,CAAA,KAAM,cACF,mIAAA,GACA,kLAAA;AAAA,oBACJ,OAAO,QAAA,IAAY;AAAA,mBACrB;AAAA,kBAEA,QAAA,kBAAAD,cAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAM,MAAA,CAAO,OAAO,KAAA,EAAc;AAAA,iBAAA;AAAA,gBAd7C,MAAA,CAAO;AAAA,eAgBf;AAAA;AAAA,WAEL,EACF;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAA,CAAe,EAAE,IAAA,EAAM,KAAA,EAAM,EAAoC;AACxE,EAAA,IAAI,CAAC,KAAA,EAAO,uBAAOA,cAAA,CAAAI,mBAAA,EAAA,EAAG,QAAA,EAAA,IAAA,EAAK,CAAA;AAE3B,EAAA,MAAM,MAAM,IAAA,CAAK,WAAA,GAAc,OAAA,CAAQ,KAAA,CAAM,aAAa,CAAA;AAC1D,EAAA,IAAI,GAAA,KAAQ,EAAA,EAAI,uBAAOJ,cAAA,CAAAI,mBAAA,EAAA,EAAG,QAAA,EAAA,IAAA,EAAK,CAAA;AAE/B,EAAA,uBACEF,eAAA,CAAAE,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,CAAK,KAAA,CAAM,GAAG,GAAG,CAAA;AAAA,oBAClBJ,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6CAAA,EACb,QAAA,EAAA,IAAA,CAAK,MAAM,GAAA,EAAK,GAAA,GAAM,KAAA,CAAM,MAAM,CAAA,EACrC,CAAA;AAAA,IACC,IAAA,CAAK,KAAA,CAAM,GAAA,GAAM,KAAA,CAAM,MAAM;AAAA,GAAA,EAChC,CAAA;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-7KTBVKNO.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { AutocompleteProps } from \"./Autocomplete.types\";\n\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSearch,\n options,\n placeholder,\n loading = false,\n emptyMessage = \"No results found.\",\n disabled = false,\n className,\n mode,\n },\n ref,\n ) {\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [query, setQuery] = useState(value);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const anchorRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, listRef, {\n placement: \"bottom-start\",\n offset: 4,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n useOutsideClick(wrapperRef, close, open);\n useEscapeKey(close, open);\n\n const filtered = options.filter((o) =>\n o.label.toLowerCase().includes(query.toLowerCase()),\n );\n\n const select = useCallback(\n (val: string) => {\n setValue(val);\n const opt = options.find((o) => o.value === val);\n setQuery(opt?.label ?? val);\n close();\n },\n [setValue, options, close],\n );\n\n useEffect(() => {\n onSearch?.(query);\n }, [query, onSearch]);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!open) {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n return;\n }\n return;\n }\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\" && activeIndex >= 0) {\n e.preventDefault();\n const item = filtered[activeIndex];\n if (item && !item.disabled) select(item.value);\n }\n };\n\n if (!showControl) {\n const matched = options.find((o) => o.value === value);\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n data-mode=\"view\"\n ref={wrapperRef}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n !value && \"text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {matched?.label ?? value ?? \"—\"}\n </div>\n );\n }\n\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n ref={wrapperRef}\n className={cn(\"relative\", className)}\n onBlur={(e) => {\n // Options live in a Portal; only exit when closed and focus left.\n if (interactive && !open && !e.currentTarget.contains(e.relatedTarget as Node)) {\n exitEdit();\n }\n }}\n >\n <input\n ref={(node) => {\n (anchorRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }}\n type=\"text\"\n value={query}\n onChange={(e) => {\n setQuery(e.target.value);\n setOpen(true);\n setActiveIndex(-1);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n autoFocus={interactive}\n role=\"combobox\"\n aria-expanded={open}\n aria-autocomplete=\"list\"\n className=\"w-full rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] placeholder:text-[color:var(--fancy-text-faint,var(--color-zinc-400))] outline-none transition-[border-color,box-shadow] duration-150 focus:border-[color:var(--fancy-focus,var(--color-blue-500))] focus:ring-2 focus:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))] dark:placeholder:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:focus:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\"\n />\n {open && (\n <Portal>\n <div\n ref={listRef}\n role=\"listbox\"\n className=\"fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:shadow-zinc-950/50 fancy-scale-in\"\n style={{\n left: position.x,\n top: position.y,\n width: anchorRef.current?.offsetWidth,\n }}\n >\n {loading ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">Loading...</div>\n ) : filtered.length === 0 ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">\n {emptyMessage}\n </div>\n ) : (\n filtered.map((option, i) => (\n <button\n key={option.value}\n type=\"button\"\n role=\"option\"\n aria-selected={i === activeIndex}\n disabled={option.disabled}\n onClick={() => select(option.value)}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200\",\n i === activeIndex\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n : \"hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))]\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <HighlightMatch text={option.label} query={query} />\n </button>\n ))\n )}\n </div>\n </Portal>\n )}\n </div>\n );\n },\n);\n\nfunction HighlightMatch({ text, query }: { text: string; query: string }) {\n if (!query) return <>{text}</>;\n\n const idx = text.toLowerCase().indexOf(query.toLowerCase());\n if (idx === -1) return <>{text}</>;\n\n return (\n <>\n {text.slice(0, idx)}\n <span className=\"font-semibold text-zinc-900 dark:text-white\">\n {text.slice(idx, idx + query.length)}\n </span>\n {text.slice(idx + query.length)}\n </>\n );\n}\n\nAutocomplete.displayName = \"Autocomplete\";\n"]}
|
|
@@ -2,7 +2,7 @@ import { InputWrapper } from './chunk-KXYMMNNV.js';
|
|
|
2
2
|
import { DisplayValue } from './chunk-WX5XYDVN.js';
|
|
3
3
|
import { Field } from './chunk-5WQ6FPSP.js';
|
|
4
4
|
import { inputBaseClasses, inputSizeClasses, dirtyClasses, errorClasses } from './chunk-USWQAMI3.js';
|
|
5
|
-
import { useInlinePaste, InlinePasteEditor, PastedFilesInput } from './chunk-
|
|
5
|
+
import { useInlinePaste, InlinePasteEditor, PastedFilesInput } from './chunk-UJZJBHMH.js';
|
|
6
6
|
import { useInlineEdit } from './chunk-OL53XYHF.js';
|
|
7
7
|
import { useFieldMode } from './chunk-NRXK42LO.js';
|
|
8
8
|
import { useControllableState } from './chunk-EDYAXGUM.js';
|
|
@@ -298,5 +298,5 @@ function EyeOffIcon() {
|
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
export { Input };
|
|
301
|
-
//# sourceMappingURL=chunk-
|
|
302
|
-
//# sourceMappingURL=chunk-
|
|
301
|
+
//# sourceMappingURL=chunk-BHUSI56C.js.map
|
|
302
|
+
//# sourceMappingURL=chunk-BHUSI56C.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-adornment-width.ts","../src/components/inputs/Input/Input.tsx"],"names":[],"mappings":"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","file":"chunk-XQDGUXMS.js","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Measure an inline adornment so the input can reserve exactly its width.\n *\n * ## Why this exists\n *\n * `leading` / `trailing` render ABSOLUTELY over the input, so they take no\n * space in flow and the input must be padded by hand to keep text clear of\n * them. That padding used to be a fixed `pl-9` / `pr-9` — 36px, sized for a\n * single icon. Any wider adornment ran straight under the value: `leading =\n * \"https://\"` is roughly 50px, so `https://` and `fancy.app` rendered on top of\n * one another.\n *\n * A fixed padding cannot be right for arbitrary content, and these props accept\n * arbitrary content — a currency code, a unit, a protocol, a short label. So\n * the width is measured rather than assumed.\n *\n * Returns `0` until measured (and on the server), which is the signal to keep\n * the old fixed padding as a fallback: an unmeasured render is then no worse\n * than it was before, rather than unpadded.\n *\n * `ResizeObserver` rather than a one-shot read, because the width changes after\n * first paint for reasons the first paint cannot see — a webfont swapping in,\n * the adornment's own content changing, a container query resizing the text.\n */\nexport function useAdornmentWidth(): [(node: HTMLElement | null) => void, number] {\n const [width, setWidth] = useState(0);\n const [node, setNode] = useState<HTMLElement | null>(null);\n\n const ref = useCallback((n: HTMLElement | null) => setNode(n), []);\n\n useEffect(() => {\n if (!node) {\n setWidth(0);\n\n return;\n }\n\n const read = () => setWidth(node.getBoundingClientRect().width);\n read();\n\n if (typeof ResizeObserver === \"undefined\") return;\n\n const observer = new ResizeObserver(read);\n observer.observe(node);\n\n return () => observer.disconnect();\n }, [node]);\n\n return [ref, width];\n}\n","import { forwardRef, useId, useMemo, useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useAdornmentWidth } from \"../../../hooks/use-adornment-width\";\nimport { Field } from \"../Field\";\nimport { InputWrapper } from \"../InputWrapper\";\nimport {\n dirtyClasses,\n errorClasses,\n inputBaseClasses,\n inputSizeClasses,\n} from \"../inputs.utils\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport {\n InlinePasteEditor,\n PastedFilesInput,\n useInlinePaste,\n type InlinePasteEditorHandle,\n} from \"../../PastePills\";\nimport type { InputProps } from \"./Input.types\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n type = \"text\",\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n leading,\n trailing,\n prefix,\n suffix,\n prefixPosition,\n suffixPosition,\n mode,\n onValueChange,\n onChange,\n reveal,\n revealed,\n onRevealedChange,\n revealLabel = \"Show password\",\n hideLabel = \"Hide password\",\n pasteThreshold,\n pasteImages = false,\n pasteFilesName,\n previewChars = 20,\n renderPastePreview,\n pasteClassNames,\n heldPastes,\n onHeldPastesChange,\n heldImages,\n onHeldImagesChange,\n ...props\n },\n ref,\n ) => {\n const autoId = useId();\n const inputId = id ?? autoId;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n // Measured, not assumed: `leading`/`trailing` take arbitrary content, and a\n // fixed padding can only ever be right for one width. See\n // `useAdornmentWidth` for what went wrong with the fixed version.\n const [leadingRef, leadingWidth] = useAdornmentWidth();\n const [trailingRef, trailingWidth] = useAdornmentWidth();\n\n // Only meaningful on a password field: a reveal on an already-visible input\n // is a button that does nothing.\n const canReveal = reveal === true && type === \"password\";\n const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);\n const shown = canReveal && isRevealed;\n // The rendered type, NOT the declared one — `type` stays \"password\" so the\n // display-mode masking below and any caller reading props are unaffected.\n const renderedType = shown ? \"text\" : type;\n\n /*\n * Paste pills: the same core `Composer` and `PromptInput` use, so the three\n * cannot disagree about what a pill holds or what a send carries. Hooks run\n * whether or not it is on (Rules of Hooks); nothing is rendered unless asked.\n */\n const pasting = pasteThreshold !== undefined || pasteImages;\n const editorRef = useRef<InlinePasteEditorHandle>(null);\n const hiddenRef = useRef<HTMLInputElement | null>(null);\n const paste = useInlinePaste({\n pasteThreshold,\n pasteImages,\n previewChars,\n renderPastePreview,\n classNames: pasteClassNames,\n disabled: disabled === true,\n heldPastes,\n onHeldPastesChange,\n heldImages,\n onHeldImagesChange,\n editorRef,\n blockText: false,\n });\n const [pasteValue, setPasteValue] = useControllableState<string>(\n props.value === undefined ? undefined : String(props.value),\n props.defaultValue === undefined ? \"\" : String(props.defaultValue),\n onValueChange,\n );\n const filesName = pasteFilesName ?? (props.name ? `${props.name}_files[]` : undefined);\n const pastedFiles = useMemo(\n () => (pasteImages ? paste.imagesIn(pasteValue).map((i) => i.file) : []),\n [pasteImages, paste, pasteValue],\n );\n const labelId = `${inputId}-label`;\n\n const input = !showControl ? (\n <DisplayValue\n size={size}\n interactive={interactive}\n onActivate={enterEdit}\n leading={leading ?? prefix}\n trailing={trailing ?? suffix}\n >\n {type === \"password\" ? (props.value ? \"••••••\" : \"\") : (props.value as string | undefined)}\n </DisplayValue>\n ) : (\n <InputWrapper\n prefix={prefix}\n suffix={suffix}\n prefixPosition={prefixPosition}\n suffixPosition={suffixPosition}\n size={size}\n >\n <div data-react-fancy-input=\"\" className=\"relative flex items-center\">\n {leading && (\n <span\n ref={leadingRef}\n className=\"pointer-events-none absolute left-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\"\n >\n {leading}\n </span>\n )}\n {pasting ? (\n <>\n <div className=\"min-w-0 flex-1\">\n <InlinePasteEditor\n ref={editorRef}\n id={inputId}\n value={pasteValue}\n known={paste.known}\n onChange={(next) => {\n setPasteValue(next);\n paste.prune(next);\n }}\n // Enter in a text field submits its form; keep that.\n onSubmit={() => hiddenRef.current?.form?.requestSubmit()}\n multiline={false}\n onPaste={paste.decidePaste}\n onHostsChange={paste.onHostsChange}\n placeholder={props.placeholder ?? \"\"}\n disabled={disabled === true}\n ariaLabelledBy={label ? labelId : props[\"aria-labelledby\"]}\n ariaInvalid={Boolean(error)}\n placeholderClassName={cn(pastePlaceholderClasses[size], leading ? \"left-9\" : undefined)}\n style={{\n ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n }}\n className={cn(\n inputBaseClasses,\n inputSizeClasses[size],\n dirtyClasses(dirty),\n errorClasses(error),\n // One line, like the <input> it stands in for.\n \"min-h-0 max-h-none w-full overflow-x-auto overflow-y-hidden whitespace-nowrap break-normal\",\n leading && !leadingWidth && \"pl-9\",\n trailing && !trailingWidth && \"pr-9\",\n className,\n pasteClassNames?.input,\n )}\n />\n </div>\n {paste.portals}\n {/* What a native submit posts: the value with every pill expanded. */}\n <input\n ref={(el) => {\n hiddenRef.current = el;\n if (typeof ref === \"function\") ref(el);\n else if (ref) ref.current = el;\n }}\n type=\"hidden\"\n name={props.name}\n form={props.form}\n value={paste.expand(pasteValue)}\n />\n {pasteImages && filesName && (\n <PastedFilesInput name={filesName} files={pastedFiles} form={props.form} />\n )}\n </>\n ) : (\n <input\n ref={ref}\n id={inputId}\n type={renderedType}\n disabled={disabled}\n required={required}\n className={cn(\n inputBaseClasses,\n inputSizeClasses[size],\n dirtyClasses(dirty),\n errorClasses(error),\n \"w-full\",\n // The fixed classes are the PRE-MEASURE fallback only. Once the\n // adornment is measured, the inline style below overrides them\n // with its real width -- a fixed 36px is correct for one icon and\n // wrong for anything wider, which is how `https://` came to\n // render on top of the value.\n leading && !leadingWidth && \"pl-9\",\n (trailing || canReveal) && !trailingWidth && \"pr-9\",\n className,\n )}\n style={{\n // 12px clears `left-3`/`right-3`; 8px is the gap to the text.\n ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n ...props.style,\n }}\n onChange={(e) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n }}\n {...props}\n // Inline click-to-edit: focus on entering edit, return to the display\n // (and run the host's onBlur) when focus leaves.\n autoFocus={interactive || props.autoFocus}\n onBlur={(e) => {\n props.onBlur?.(e);\n if (interactive) exitEdit();\n }}\n />\n )}\n {canReveal ? (\n <button\n type=\"button\"\n // type=\"button\" is load-bearing: the default is \"submit\", so a\n // reveal inside a login form would submit it on every click.\n id={`${inputId}-reveal`}\n data-react-fancy-reveal=\"\"\n onClick={() => setRevealed((v) => !v)}\n disabled={disabled}\n aria-controls={inputId}\n aria-pressed={shown}\n aria-label={shown ? hideLabel : revealLabel}\n title={shown ? hideLabel : revealLabel}\n // Not focusable by tab: the field and the submit button are the\n // path through a login form, and a reveal in between is a stop\n // most people do not want. Still reachable by click and by\n // screen readers.\n tabIndex={-1}\n className=\"absolute right-2 inline-flex items-center justify-center rounded p-1 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] transition-colors hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50 dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:hover:text-zinc-300\"\n >\n {shown ? <EyeOffIcon /> : <EyeIcon />}\n </button>\n ) : (\n trailing && (\n <span\n ref={trailingRef}\n className=\"pointer-events-none absolute right-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\"\n >\n {trailing}\n </span>\n )\n )}\n </div>\n </InputWrapper>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelId={pasting ? labelId : undefined}\n labelHidden={labelHidden}\n description={description}\n error={error}\n required={required}\n htmlFor={inputId}\n size={size}\n >\n {input}\n </Field>\n );\n }\n\n return input;\n },\n);\n\nInput.displayName = \"Input\";\n\n/** Where the placeholder sits over the paste editor, matching `inputSizeClasses`. */\nconst pastePlaceholderClasses = {\n xs: \"left-2 top-1 text-xs\",\n sm: \"left-2.5 top-1.5 text-sm\",\n md: \"left-3 top-2 text-sm\",\n lg: \"left-4 top-2.5 text-base\",\n xl: \"left-5 top-3 text-lg\",\n} as const;\n\n/**\n * Inline SVGs rather than the Icon component: Input is the most-installed\n * primitive in the kit, and routing it through the icon registry would make\n * every consumer's password field depend on an icon set being configured.\n */\nfunction EyeIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n );\n}\n\nfunction EyeOffIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n <path d=\"m2 2 20 20\" />\n </svg>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-adornment-width.ts","../src/components/inputs/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BO,SAAS,iBAAA,GAAkE;AAChF,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AACpC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,IAAI,CAAA;AAEzD,EAAA,MAAM,GAAA,GAAM,YAAY,CAAC,CAAA,KAA0B,QAAQ,CAAC,CAAA,EAAG,EAAE,CAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,QAAA,CAAS,CAAC,CAAA;AAEV,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,OAAO,MAAM,QAAA,CAAS,IAAA,CAAK,qBAAA,GAAwB,KAAK,CAAA;AAC9D,IAAA,IAAA,EAAK;AAEL,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AAE3C,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,IAAI,CAAA;AACxC,IAAA,QAAA,CAAS,QAAQ,IAAI,CAAA;AAErB,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,OAAO,CAAC,KAAK,KAAK,CAAA;AACpB;AC5BO,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE;AAAA,IACE,IAAA,GAAO,MAAA;AAAA,IACP,IAAA,GAAO,IAAA;AAAA,IACP,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,IAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA,GAAc,eAAA;AAAA,IACd,SAAA,GAAY,eAAA;AAAA,IACZ,cAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,cAAA;AAAA,IACA,YAAA,GAAe,EAAA;AAAA,IACf,kBAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,SAAS,KAAA,EAAM;AACrB,IAAA,MAAM,UAAU,EAAA,IAAM,MAAA;AACtB,IAAA,MAAM,YAAA,GAAe,aAAa,IAAI,CAAA;AACtC,IAAA,MAAM,EAAE,aAAa,WAAA,EAAa,SAAA,EAAW,UAAS,GAAI,aAAA,CAAc,cAAc,QAAQ,CAAA;AAK9F,IAAA,MAAM,CAAC,UAAA,EAAY,YAAY,CAAA,GAAI,iBAAA,EAAkB;AACrD,IAAA,MAAM,CAAC,WAAA,EAAa,aAAa,CAAA,GAAI,iBAAA,EAAkB;AAIvD,IAAA,MAAM,SAAA,GAAY,MAAA,KAAW,IAAA,IAAQ,IAAA,KAAS,UAAA;AAC9C,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,IAAI,oBAAA,CAAqB,QAAA,EAAU,OAAO,gBAAgB,CAAA;AACxF,IAAA,MAAM,QAAQ,SAAA,IAAa,UAAA;AAG3B,IAAA,MAAM,YAAA,GAAe,QAAQ,MAAA,GAAS,IAAA;AAOtC,IAAA,MAAM,OAAA,GAAU,mBAAmB,MAAA,IAAa,WAAA;AAChD,IAAA,MAAM,SAAA,GAAY,OAAgC,IAAI,CAAA;AACtD,IAAA,MAAM,SAAA,GAAY,OAAgC,IAAI,CAAA;AACtD,IAAA,MAAM,QAAQ,cAAA,CAAe;AAAA,MAC3B,cAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,UAAA,EAAY,eAAA;AAAA,MACZ,UAAU,QAAA,KAAa,IAAA;AAAA,MACvB,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,EAAW;AAAA,KACZ,CAAA;AACD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,oBAAA;AAAA,MAClC,MAAM,KAAA,KAAU,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,MAAM,KAAK,CAAA;AAAA,MAC1D,MAAM,YAAA,KAAiB,MAAA,GAAY,EAAA,GAAK,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA,MACjE;AAAA,KACF;AACA,IAAA,MAAM,YAAY,cAAA,KAAmB,KAAA,CAAM,OAAO,CAAA,EAAG,KAAA,CAAM,IAAI,CAAA,QAAA,CAAA,GAAa,MAAA,CAAA;AAC5E,IAAA,MAAM,WAAA,GAAc,OAAA;AAAA,MAClB,MAAO,WAAA,GAAc,KAAA,CAAM,QAAA,CAAS,UAAU,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,GAAI,EAAC;AAAA,MACtE,CAAC,WAAA,EAAa,KAAA,EAAO,UAAU;AAAA,KACjC;AACA,IAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAE1B,IAAA,MAAM,KAAA,GAAQ,CAAC,WAAA,mBACb,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA,EAAY,SAAA;AAAA,QACZ,SAAS,OAAA,IAAW,MAAA;AAAA,QACpB,UAAU,QAAA,IAAY,MAAA;AAAA,QAErB,mBAAS,UAAA,GAAc,KAAA,CAAM,KAAA,GAAQ,sCAAA,GAAW,KAAO,KAAA,CAAM;AAAA;AAAA,KAChE,mBAEA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,MAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,wBAAA,EAAuB,EAAA,EAAG,WAAU,4BAAA,EACtC,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,UAAA;AAAA,cACL,SAAA,EAAU,qKAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,0BACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EACb,QAAA,kBAAA,GAAA;AAAA,cAAC,iBAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,SAAA;AAAA,gBACL,EAAA,EAAI,OAAA;AAAA,gBACJ,KAAA,EAAO,UAAA;AAAA,gBACP,OAAO,KAAA,CAAM,KAAA;AAAA,gBACb,QAAA,EAAU,CAAC,IAAA,KAAS;AAClB,kBAAA,aAAA,CAAc,IAAI,CAAA;AAClB,kBAAA,KAAA,CAAM,MAAM,IAAI,CAAA;AAAA,gBAClB,CAAA;AAAA,gBAEA,QAAA,EAAU,MAAM,SAAA,CAAU,OAAA,EAAS,MAAM,aAAA,EAAc;AAAA,gBACvD,SAAA,EAAW,KAAA;AAAA,gBACX,SAAS,KAAA,CAAM,WAAA;AAAA,gBACf,eAAe,KAAA,CAAM,aAAA;AAAA,gBACrB,WAAA,EAAa,MAAM,WAAA,IAAe,EAAA;AAAA,gBAClC,UAAU,QAAA,KAAa,IAAA;AAAA,gBACvB,cAAA,EAAgB,KAAA,GAAQ,OAAA,GAAU,KAAA,CAAM,iBAAiB,CAAA;AAAA,gBACzD,WAAA,EAAa,QAAQ,KAAK,CAAA;AAAA,gBAC1B,sBAAsB,EAAA,CAAG,uBAAA,CAAwB,IAAI,CAAA,EAAG,OAAA,GAAU,WAAW,MAAS,CAAA;AAAA,gBACtF,KAAA,EAAO;AAAA,kBACL,GAAI,YAAA,GAAe,EAAE,WAAA,EAAa,YAAA,GAAe,IAAG,GAAI,IAAA;AAAA,kBACxD,GAAI,aAAA,GAAgB,EAAE,YAAA,EAAc,aAAA,GAAgB,IAAG,GAAI;AAAA,iBAC7D;AAAA,gBACA,SAAA,EAAW,EAAA;AAAA,kBACT,gBAAA;AAAA,kBACA,iBAAiB,IAAI,CAAA;AAAA,kBACrB,aAAa,KAAK,CAAA;AAAA,kBAClB,aAAa,KAAK,CAAA;AAAA;AAAA,kBAElB,4FAAA;AAAA,kBACA,OAAA,IAAW,CAAC,YAAA,IAAgB,MAAA;AAAA,kBAC5B,QAAA,IAAY,CAAC,aAAA,IAAiB,MAAA;AAAA,kBAC9B,SAAA;AAAA,kBACA,eAAA,EAAiB;AAAA;AACnB;AAAA,aACF,EACF,CAAA;AAAA,YACC,KAAA,CAAM,OAAA;AAAA,4BAEP,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,CAAC,EAAA,KAAO;AACX,kBAAA,SAAA,CAAU,OAAA,GAAU,EAAA;AACpB,kBAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,EAAE,CAAA;AAAA,uBAAA,IAC5B,GAAA,MAAS,OAAA,GAAU,EAAA;AAAA,gBAC9B,CAAA;AAAA,gBACA,IAAA,EAAK,QAAA;AAAA,gBACL,MAAM,KAAA,CAAM,IAAA;AAAA,gBACZ,MAAM,KAAA,CAAM,IAAA;AAAA,gBACZ,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,UAAU;AAAA;AAAA,aAChC;AAAA,YACC,WAAA,IAAe,SAAA,oBACd,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAM,WAAW,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,KAAA,CAAM,IAAA,EAAM;AAAA,WAAA,EAE7E,CAAA,mBAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,EAAA,EAAI,OAAA;AAAA,cACJ,IAAA,EAAM,YAAA;AAAA,cACN,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,gBAAA;AAAA,gBACA,iBAAiB,IAAI,CAAA;AAAA,gBACrB,aAAa,KAAK,CAAA;AAAA,gBAClB,aAAa,KAAK,CAAA;AAAA,gBAClB,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMA,OAAA,IAAW,CAAC,YAAA,IAAgB,MAAA;AAAA,gBAAA,CAC3B,QAAA,IAAY,SAAA,KAAc,CAAC,aAAA,IAAiB,MAAA;AAAA,gBAC7C;AAAA,eACF;AAAA,cACA,KAAA,EAAO;AAAA;AAAA,gBAEL,GAAI,YAAA,GAAe,EAAE,WAAA,EAAa,YAAA,GAAe,IAAG,GAAI,IAAA;AAAA,gBACxD,GAAI,aAAA,GAAgB,EAAE,YAAA,EAAc,aAAA,GAAgB,IAAG,GAAI,IAAA;AAAA,gBAC3D,GAAG,KAAA,CAAM;AAAA,eACX;AAAA,cACA,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,QAAA,GAAW,CAAC,CAAA;AACZ,gBAAA,aAAA,GAAgB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAChC,CAAA;AAAA,cACC,GAAG,KAAA;AAAA,cAGJ,SAAA,EAAW,eAAe,KAAA,CAAM,SAAA;AAAA,cAChC,MAAA,EAAQ,CAAC,CAAA,KAAM;AACb,gBAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAChB,gBAAA,IAAI,aAAa,QAAA,EAAS;AAAA,cAC5B;AAAA;AAAA,WACF;AAAA,UAED,SAAA,mBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cAGL,EAAA,EAAI,GAAG,OAAO,CAAA,OAAA,CAAA;AAAA,cACd,yBAAA,EAAwB,EAAA;AAAA,cACxB,SAAS,MAAM,WAAA,CAAY,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,cACpC,QAAA;AAAA,cACA,eAAA,EAAe,OAAA;AAAA,cACf,cAAA,EAAc,KAAA;AAAA,cACd,YAAA,EAAY,QAAQ,SAAA,GAAY,WAAA;AAAA,cAChC,KAAA,EAAO,QAAQ,SAAA,GAAY,WAAA;AAAA,cAK3B,QAAA,EAAU,EAAA;AAAA,cACV,SAAA,EAAU,oYAAA;AAAA,cAET,QAAA,EAAA,KAAA,mBAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA,uBAAM,OAAA,EAAA,EAAQ;AAAA;AAAA,cAGrC,QAAA,oBACE,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,WAAA;AAAA,cACL,SAAA,EAAU,sKAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EAGN;AAAA;AAAA,KACF;AAGF,IAAA,IAAI,KAAA,IAAS,SAAS,WAAA,EAAa;AACjC,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,OAAA,EAAS,UAAU,OAAA,GAAU,MAAA;AAAA,UAC7B,WAAA;AAAA,UACA,WAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA;AAAA,UACA,OAAA,EAAS,OAAA;AAAA,UACT,IAAA;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAEA,IAAA,OAAO,KAAA;AAAA,EACT;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAGpB,IAAM,uBAAA,GAA0B;AAAA,EAC9B,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,0BAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,0BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAOA,SAAS,OAAA,GAAU;AACjB,EAAA,4BACG,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,QAAO,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,eAAY,MAAA,EACzJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,uGAAA,EAAwG,CAAA;AAAA,wBAC/G,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI;AAAA,GAAA,EAChC,CAAA;AAEJ;AAEA,SAAS,UAAA,GAAa;AACpB,EAAA,4BACG,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,QAAO,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,eAAY,MAAA,EACzJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,gGAAA,EAAiG,CAAA;AAAA,oBACzG,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sCAAA,EAAuC,CAAA;AAAA,oBAC/C,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8FAAA,EAA+F,CAAA;AAAA,oBACvG,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EACvB,CAAA;AAEJ","file":"chunk-BHUSI56C.js","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Measure an inline adornment so the input can reserve exactly its width.\n *\n * ## Why this exists\n *\n * `leading` / `trailing` render ABSOLUTELY over the input, so they take no\n * space in flow and the input must be padded by hand to keep text clear of\n * them. That padding used to be a fixed `pl-9` / `pr-9` — 36px, sized for a\n * single icon. Any wider adornment ran straight under the value: `leading =\n * \"https://\"` is roughly 50px, so `https://` and `fancy.app` rendered on top of\n * one another.\n *\n * A fixed padding cannot be right for arbitrary content, and these props accept\n * arbitrary content — a currency code, a unit, a protocol, a short label. So\n * the width is measured rather than assumed.\n *\n * Returns `0` until measured (and on the server), which is the signal to keep\n * the old fixed padding as a fallback: an unmeasured render is then no worse\n * than it was before, rather than unpadded.\n *\n * `ResizeObserver` rather than a one-shot read, because the width changes after\n * first paint for reasons the first paint cannot see — a webfont swapping in,\n * the adornment's own content changing, a container query resizing the text.\n */\nexport function useAdornmentWidth(): [(node: HTMLElement | null) => void, number] {\n const [width, setWidth] = useState(0);\n const [node, setNode] = useState<HTMLElement | null>(null);\n\n const ref = useCallback((n: HTMLElement | null) => setNode(n), []);\n\n useEffect(() => {\n if (!node) {\n setWidth(0);\n\n return;\n }\n\n const read = () => setWidth(node.getBoundingClientRect().width);\n read();\n\n if (typeof ResizeObserver === \"undefined\") return;\n\n const observer = new ResizeObserver(read);\n observer.observe(node);\n\n return () => observer.disconnect();\n }, [node]);\n\n return [ref, width];\n}\n","import { forwardRef, useId, useMemo, useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useAdornmentWidth } from \"../../../hooks/use-adornment-width\";\nimport { Field } from \"../Field\";\nimport { InputWrapper } from \"../InputWrapper\";\nimport {\n dirtyClasses,\n errorClasses,\n inputBaseClasses,\n inputSizeClasses,\n} from \"../inputs.utils\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport {\n InlinePasteEditor,\n PastedFilesInput,\n useInlinePaste,\n type InlinePasteEditorHandle,\n} from \"../../PastePills\";\nimport type { InputProps } from \"./Input.types\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n type = \"text\",\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n leading,\n trailing,\n prefix,\n suffix,\n prefixPosition,\n suffixPosition,\n mode,\n onValueChange,\n onChange,\n reveal,\n revealed,\n onRevealedChange,\n revealLabel = \"Show password\",\n hideLabel = \"Hide password\",\n pasteThreshold,\n pasteImages = false,\n pasteFilesName,\n previewChars = 20,\n renderPastePreview,\n pasteClassNames,\n heldPastes,\n onHeldPastesChange,\n heldImages,\n onHeldImagesChange,\n ...props\n },\n ref,\n ) => {\n const autoId = useId();\n const inputId = id ?? autoId;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n // Measured, not assumed: `leading`/`trailing` take arbitrary content, and a\n // fixed padding can only ever be right for one width. See\n // `useAdornmentWidth` for what went wrong with the fixed version.\n const [leadingRef, leadingWidth] = useAdornmentWidth();\n const [trailingRef, trailingWidth] = useAdornmentWidth();\n\n // Only meaningful on a password field: a reveal on an already-visible input\n // is a button that does nothing.\n const canReveal = reveal === true && type === \"password\";\n const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);\n const shown = canReveal && isRevealed;\n // The rendered type, NOT the declared one — `type` stays \"password\" so the\n // display-mode masking below and any caller reading props are unaffected.\n const renderedType = shown ? \"text\" : type;\n\n /*\n * Paste pills: the same core `Composer` and `PromptInput` use, so the three\n * cannot disagree about what a pill holds or what a send carries. Hooks run\n * whether or not it is on (Rules of Hooks); nothing is rendered unless asked.\n */\n const pasting = pasteThreshold !== undefined || pasteImages;\n const editorRef = useRef<InlinePasteEditorHandle>(null);\n const hiddenRef = useRef<HTMLInputElement | null>(null);\n const paste = useInlinePaste({\n pasteThreshold,\n pasteImages,\n previewChars,\n renderPastePreview,\n classNames: pasteClassNames,\n disabled: disabled === true,\n heldPastes,\n onHeldPastesChange,\n heldImages,\n onHeldImagesChange,\n editorRef,\n blockText: false,\n });\n const [pasteValue, setPasteValue] = useControllableState<string>(\n props.value === undefined ? undefined : String(props.value),\n props.defaultValue === undefined ? \"\" : String(props.defaultValue),\n onValueChange,\n );\n const filesName = pasteFilesName ?? (props.name ? `${props.name}_files[]` : undefined);\n const pastedFiles = useMemo(\n () => (pasteImages ? paste.imagesIn(pasteValue).map((i) => i.file) : []),\n [pasteImages, paste, pasteValue],\n );\n const labelId = `${inputId}-label`;\n\n const input = !showControl ? (\n <DisplayValue\n size={size}\n interactive={interactive}\n onActivate={enterEdit}\n leading={leading ?? prefix}\n trailing={trailing ?? suffix}\n >\n {type === \"password\" ? (props.value ? \"••••••\" : \"\") : (props.value as string | undefined)}\n </DisplayValue>\n ) : (\n <InputWrapper\n prefix={prefix}\n suffix={suffix}\n prefixPosition={prefixPosition}\n suffixPosition={suffixPosition}\n size={size}\n >\n <div data-react-fancy-input=\"\" className=\"relative flex items-center\">\n {leading && (\n <span\n ref={leadingRef}\n className=\"pointer-events-none absolute left-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\"\n >\n {leading}\n </span>\n )}\n {pasting ? (\n <>\n <div className=\"min-w-0 flex-1\">\n <InlinePasteEditor\n ref={editorRef}\n id={inputId}\n value={pasteValue}\n known={paste.known}\n onChange={(next) => {\n setPasteValue(next);\n paste.prune(next);\n }}\n // Enter in a text field submits its form; keep that.\n onSubmit={() => hiddenRef.current?.form?.requestSubmit()}\n multiline={false}\n onPaste={paste.decidePaste}\n onHostsChange={paste.onHostsChange}\n placeholder={props.placeholder ?? \"\"}\n disabled={disabled === true}\n ariaLabelledBy={label ? labelId : props[\"aria-labelledby\"]}\n ariaInvalid={Boolean(error)}\n placeholderClassName={cn(pastePlaceholderClasses[size], leading ? \"left-9\" : undefined)}\n style={{\n ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n }}\n className={cn(\n inputBaseClasses,\n inputSizeClasses[size],\n dirtyClasses(dirty),\n errorClasses(error),\n // One line, like the <input> it stands in for.\n \"min-h-0 max-h-none w-full overflow-x-auto overflow-y-hidden whitespace-nowrap break-normal\",\n leading && !leadingWidth && \"pl-9\",\n trailing && !trailingWidth && \"pr-9\",\n className,\n pasteClassNames?.input,\n )}\n />\n </div>\n {paste.portals}\n {/* What a native submit posts: the value with every pill expanded. */}\n <input\n ref={(el) => {\n hiddenRef.current = el;\n if (typeof ref === \"function\") ref(el);\n else if (ref) ref.current = el;\n }}\n type=\"hidden\"\n name={props.name}\n form={props.form}\n value={paste.expand(pasteValue)}\n />\n {pasteImages && filesName && (\n <PastedFilesInput name={filesName} files={pastedFiles} form={props.form} />\n )}\n </>\n ) : (\n <input\n ref={ref}\n id={inputId}\n type={renderedType}\n disabled={disabled}\n required={required}\n className={cn(\n inputBaseClasses,\n inputSizeClasses[size],\n dirtyClasses(dirty),\n errorClasses(error),\n \"w-full\",\n // The fixed classes are the PRE-MEASURE fallback only. Once the\n // adornment is measured, the inline style below overrides them\n // with its real width -- a fixed 36px is correct for one icon and\n // wrong for anything wider, which is how `https://` came to\n // render on top of the value.\n leading && !leadingWidth && \"pl-9\",\n (trailing || canReveal) && !trailingWidth && \"pr-9\",\n className,\n )}\n style={{\n // 12px clears `left-3`/`right-3`; 8px is the gap to the text.\n ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n ...props.style,\n }}\n onChange={(e) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n }}\n {...props}\n // Inline click-to-edit: focus on entering edit, return to the display\n // (and run the host's onBlur) when focus leaves.\n autoFocus={interactive || props.autoFocus}\n onBlur={(e) => {\n props.onBlur?.(e);\n if (interactive) exitEdit();\n }}\n />\n )}\n {canReveal ? (\n <button\n type=\"button\"\n // type=\"button\" is load-bearing: the default is \"submit\", so a\n // reveal inside a login form would submit it on every click.\n id={`${inputId}-reveal`}\n data-react-fancy-reveal=\"\"\n onClick={() => setRevealed((v) => !v)}\n disabled={disabled}\n aria-controls={inputId}\n aria-pressed={shown}\n aria-label={shown ? hideLabel : revealLabel}\n title={shown ? hideLabel : revealLabel}\n // Not focusable by tab: the field and the submit button are the\n // path through a login form, and a reveal in between is a stop\n // most people do not want. Still reachable by click and by\n // screen readers.\n tabIndex={-1}\n className=\"absolute right-2 inline-flex items-center justify-center rounded p-1 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] transition-colors hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50 dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:hover:text-zinc-300\"\n >\n {shown ? <EyeOffIcon /> : <EyeIcon />}\n </button>\n ) : (\n trailing && (\n <span\n ref={trailingRef}\n className=\"pointer-events-none absolute right-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\"\n >\n {trailing}\n </span>\n )\n )}\n </div>\n </InputWrapper>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelId={pasting ? labelId : undefined}\n labelHidden={labelHidden}\n description={description}\n error={error}\n required={required}\n htmlFor={inputId}\n size={size}\n >\n {input}\n </Field>\n );\n }\n\n return input;\n },\n);\n\nInput.displayName = \"Input\";\n\n/** Where the placeholder sits over the paste editor, matching `inputSizeClasses`. */\nconst pastePlaceholderClasses = {\n xs: \"left-2 top-1 text-xs\",\n sm: \"left-2.5 top-1.5 text-sm\",\n md: \"left-3 top-2 text-sm\",\n lg: \"left-4 top-2.5 text-base\",\n xl: \"left-5 top-3 text-lg\",\n} as const;\n\n/**\n * Inline SVGs rather than the Icon component: Input is the most-installed\n * primitive in the kit, and routing it through the icon registry would make\n * every consumer's password field depend on an icon set being configured.\n */\nfunction EyeIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n );\n}\n\nfunction EyeOffIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n <path d=\"m2 2 20 20\" />\n </svg>\n );\n}\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { FullScreenProvider, FullScreenToggle } from './chunk-4JLFIPHZ.js';
|
|
2
|
+
import { useFullScreen } from './chunk-CHQH6M67.js';
|
|
1
3
|
import { mergeExtensions, htmlToMarkdown, ContentRenderer, extensionEditorClasses, proseClasses, detectFormat, markdownToEditorHtml } from './chunk-L24LUSEE.js';
|
|
2
4
|
import { CodeView } from './chunk-FBWUXSKH.js';
|
|
3
5
|
import { useFieldMode } from './chunk-NRXK42LO.js';
|
|
@@ -41,6 +43,18 @@ function EditorSourceToggle({
|
|
|
41
43
|
);
|
|
42
44
|
}
|
|
43
45
|
EditorSourceToggle.displayName = "EditorSourceToggle";
|
|
46
|
+
function EditorFullScreenToggle({ className, enterIcon, exitIcon }) {
|
|
47
|
+
return /* @__PURE__ */ jsx(
|
|
48
|
+
FullScreenToggle,
|
|
49
|
+
{
|
|
50
|
+
"data-react-fancy-editor-fullscreen-toggle": "",
|
|
51
|
+
enterIcon,
|
|
52
|
+
exitIcon,
|
|
53
|
+
className: cn(className)
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
EditorFullScreenToggle.displayName = "EditorFullScreenToggle";
|
|
44
58
|
var DEFAULT_ACTIONS = [
|
|
45
59
|
{ icon: "B", label: "Bold", command: "bold" },
|
|
46
60
|
{ icon: "I", label: "Italic", command: "italic" },
|
|
@@ -52,7 +66,8 @@ function EditorToolbar({
|
|
|
52
66
|
onAction,
|
|
53
67
|
children,
|
|
54
68
|
className,
|
|
55
|
-
showSourceToggle = true
|
|
69
|
+
showSourceToggle = true,
|
|
70
|
+
showFullScreenToggle = false
|
|
56
71
|
}) {
|
|
57
72
|
const { exec, showSource } = useEditor();
|
|
58
73
|
return /* @__PURE__ */ jsx(
|
|
@@ -86,7 +101,8 @@ function EditorToolbar({
|
|
|
86
101
|
},
|
|
87
102
|
`${action.command}-${action.commandArg ?? ""}`
|
|
88
103
|
)),
|
|
89
|
-
showSourceToggle && /* @__PURE__ */ jsx(EditorSourceToggle, { className: "ml-auto" })
|
|
104
|
+
showSourceToggle && /* @__PURE__ */ jsx(EditorSourceToggle, { className: "ml-auto" }),
|
|
105
|
+
showFullScreenToggle && /* @__PURE__ */ jsx(EditorFullScreenToggle, { className: showSourceToggle ? void 0 : "ml-auto" })
|
|
90
106
|
] })
|
|
91
107
|
}
|
|
92
108
|
);
|
|
@@ -102,7 +118,7 @@ function EditorToolbarSeparator() {
|
|
|
102
118
|
);
|
|
103
119
|
}
|
|
104
120
|
EditorToolbarSeparator.displayName = "EditorToolbarSeparator";
|
|
105
|
-
function EditorContent({ className, maxHeight, sourceClassName }) {
|
|
121
|
+
function EditorContent({ className, maxHeight: maxHeightProp, sourceClassName }) {
|
|
106
122
|
const {
|
|
107
123
|
contentRef,
|
|
108
124
|
lineSpacing,
|
|
@@ -113,8 +129,10 @@ function EditorContent({ className, maxHeight, sourceClassName }) {
|
|
|
113
129
|
_initialHtml,
|
|
114
130
|
_onInput,
|
|
115
131
|
_sourceValue,
|
|
116
|
-
_onSourceInput
|
|
132
|
+
_onSourceInput,
|
|
133
|
+
fullScreen
|
|
117
134
|
} = useEditor();
|
|
135
|
+
const maxHeight = fullScreen ? void 0 : maxHeightProp;
|
|
118
136
|
const seededHtml = useRef(null);
|
|
119
137
|
useEffect(() => {
|
|
120
138
|
if (showSource) {
|
|
@@ -192,7 +210,11 @@ function EditorRoot({
|
|
|
192
210
|
unsafe = false,
|
|
193
211
|
showSource: showSourceProp,
|
|
194
212
|
defaultShowSource = false,
|
|
195
|
-
onShowSourceChange
|
|
213
|
+
onShowSourceChange,
|
|
214
|
+
fullScreen: fullScreenProp,
|
|
215
|
+
defaultFullScreen = false,
|
|
216
|
+
onFullScreenChange,
|
|
217
|
+
fullScreenMode = "overlay"
|
|
196
218
|
}) {
|
|
197
219
|
const contentRef = useRef(null);
|
|
198
220
|
const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);
|
|
@@ -201,6 +223,12 @@ function EditorRoot({
|
|
|
201
223
|
defaultShowSource,
|
|
202
224
|
onShowSourceChange
|
|
203
225
|
);
|
|
226
|
+
const fs = useFullScreen({
|
|
227
|
+
fullScreen: fullScreenProp,
|
|
228
|
+
defaultFullScreen,
|
|
229
|
+
onFullScreenChange,
|
|
230
|
+
mode: fullScreenMode
|
|
231
|
+
});
|
|
204
232
|
const mode = useFieldMode(modeProp);
|
|
205
233
|
const isView = mode === "view";
|
|
206
234
|
const lastEmitted = useRef(null);
|
|
@@ -289,20 +317,25 @@ function EditorRoot({
|
|
|
289
317
|
extensions,
|
|
290
318
|
showSource,
|
|
291
319
|
setShowSource,
|
|
320
|
+
fullScreen: fs.fullScreen,
|
|
321
|
+
setFullScreen: fs.setFullScreen,
|
|
292
322
|
_initialHtml: initialHtml,
|
|
293
323
|
_onInput: handleInput,
|
|
294
324
|
_sourceValue: value,
|
|
295
325
|
_onSourceInput: handleSourceInput
|
|
296
326
|
};
|
|
297
327
|
if (isView) {
|
|
298
|
-
return /* @__PURE__ */ jsx(
|
|
328
|
+
return /* @__PURE__ */ jsx(FullScreenProvider, { value: fs, children: /* @__PURE__ */ jsx(
|
|
299
329
|
"div",
|
|
300
330
|
{
|
|
331
|
+
...fs.targetProps,
|
|
301
332
|
"data-react-fancy-editor": "",
|
|
302
333
|
"data-mode": "view",
|
|
303
334
|
className: cn(
|
|
304
335
|
"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
|
|
305
|
-
className
|
|
336
|
+
className,
|
|
337
|
+
// Read-only content taller than the viewport must scroll in place.
|
|
338
|
+
fs.fullScreen && "overflow-auto"
|
|
306
339
|
),
|
|
307
340
|
children: /* @__PURE__ */ jsx(
|
|
308
341
|
ContentRenderer,
|
|
@@ -316,11 +349,12 @@ function EditorRoot({
|
|
|
316
349
|
}
|
|
317
350
|
)
|
|
318
351
|
}
|
|
319
|
-
);
|
|
352
|
+
) });
|
|
320
353
|
}
|
|
321
|
-
return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
354
|
+
return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FullScreenProvider, { value: fs, children: /* @__PURE__ */ jsx(
|
|
322
355
|
"div",
|
|
323
356
|
{
|
|
357
|
+
...fs.targetProps,
|
|
324
358
|
"data-react-fancy-editor": "",
|
|
325
359
|
"data-mode": "edit",
|
|
326
360
|
className: cn(
|
|
@@ -329,7 +363,7 @@ function EditorRoot({
|
|
|
329
363
|
),
|
|
330
364
|
children
|
|
331
365
|
}
|
|
332
|
-
) });
|
|
366
|
+
) }) });
|
|
333
367
|
}
|
|
334
368
|
var ToolbarWithSeparator = Object.assign(EditorToolbar, {
|
|
335
369
|
Separator: EditorToolbarSeparator
|
|
@@ -337,9 +371,10 @@ var ToolbarWithSeparator = Object.assign(EditorToolbar, {
|
|
|
337
371
|
var Editor = Object.assign(EditorRoot, {
|
|
338
372
|
Toolbar: ToolbarWithSeparator,
|
|
339
373
|
Content: EditorContent,
|
|
340
|
-
SourceToggle: EditorSourceToggle
|
|
374
|
+
SourceToggle: EditorSourceToggle,
|
|
375
|
+
FullScreenToggle: EditorFullScreenToggle
|
|
341
376
|
});
|
|
342
377
|
|
|
343
378
|
export { Editor, useEditor };
|
|
344
|
-
//# sourceMappingURL=chunk-
|
|
345
|
-
//# sourceMappingURL=chunk-
|
|
379
|
+
//# sourceMappingURL=chunk-BLS2IGPY.js.map
|
|
380
|
+
//# sourceMappingURL=chunk-BLS2IGPY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Editor/Editor.context.ts","../src/components/Editor/EditorSourceToggle.tsx","../src/components/Editor/EditorFullScreenToggle.tsx","../src/components/Editor/EditorToolbar.tsx","../src/components/Editor/EditorToolbarSeparator.tsx","../src/components/Editor/EditorContent.tsx","../src/components/Editor/Editor.tsx"],"names":["jsx","useRef","useEffect","useMemo"],"mappings":"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","file":"chunk-BLS2IGPY.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { RenderExtension } from \"../ContentRenderer/extensions\";\n\nexport interface EditorContextValue {\n contentRef: RefObject<HTMLDivElement | null>;\n exec: (command: string, arg?: string) => void;\n insertText: (text: string) => void;\n wrapSelection: (before: string, after: string) => void;\n outputFormat: \"html\" | \"markdown\";\n lineSpacing: number;\n placeholder?: string;\n /** Merged render extensions (global + instance). */\n extensions: RenderExtension[];\n /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */\n showSource: boolean;\n /** Toggle/set the raw-source view. */\n setShowSource: (showSource: boolean) => void;\n /** Whether the editor currently covers the viewport. */\n fullScreen: boolean;\n /** Enter/leave full screen. Goes through `onFullScreenChange` when controlled. */\n setFullScreen: (fullScreen: boolean) => void;\n /** Initial HTML content to load into the editor on mount */\n _initialHtml: string;\n /** @internal Called by EditorContent on input events */\n _onInput: () => void;\n /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */\n _sourceValue: string;\n /** @internal Commit an edit made directly in the source textarea. */\n _onSourceInput: (value: string) => void;\n}\n\nexport const EditorContext = createContext<EditorContextValue | null>(null);\n\nexport function useEditor(): EditorContextValue {\n const ctx = useContext(EditorContext);\n if (!ctx) {\n throw new Error(\"useEditor must be used within an <Editor> component\");\n }\n return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport type { EditorSourceToggleProps } from \"./Editor.types\";\n\n/**\n * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads\n * `showSource` / `setShowSource` from context, so it works in the default\n * toolbar and in any custom toolbar composed with `useEditor()`.\n */\nexport function EditorSourceToggle({\n className,\n icon = \"</>\",\n title = \"Source\",\n activeTitle = \"Rich text\",\n}: EditorSourceToggleProps) {\n const { showSource, setShowSource } = useEditor();\n\n return (\n <button\n type=\"button\"\n onClick={() => setShowSource(!showSource)}\n title={showSource ? activeTitle : title}\n aria-pressed={showSource}\n data-react-fancy-editor-source-toggle=\"\"\n className={cn(\n \"inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors\",\n showSource\n ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {icon}\n </button>\n );\n}\n\nEditorSourceToggle.displayName = \"EditorSourceToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { FullScreenToggle } from \"../FullScreen/FullScreenToggle\";\nimport type { EditorFullScreenToggleProps } from \"./Editor.types\";\n\n/**\n * Toolbar button that takes the editor full screen and back. The shared\n * `FullScreen.Toggle`, styled for the editor toolbar and carrying the editor's\n * own handle (`data-react-fancy-editor-fullscreen-toggle`) next to the shared\n * one (`data-react-fancy-fullscreen-toggle`).\n */\nexport function EditorFullScreenToggle({ className, enterIcon, exitIcon }: EditorFullScreenToggleProps) {\n return (\n <FullScreenToggle\n data-react-fancy-editor-fullscreen-toggle=\"\"\n enterIcon={enterIcon}\n exitIcon={exitIcon}\n className={cn(className)}\n />\n );\n}\n\nEditorFullScreenToggle.displayName = \"EditorFullScreenToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport { EditorFullScreenToggle } from \"./EditorFullScreenToggle\";\nimport type { EditorToolbarProps } from \"./Editor.types\";\n\nconst DEFAULT_ACTIONS = [\n { icon: \"B\", label: \"Bold\", command: \"bold\" },\n { icon: \"I\", label: \"Italic\", command: \"italic\" },\n { icon: \"U\", label: \"Underline\", command: \"underline\" },\n { icon: \"S\", label: \"Strikethrough\", command: \"strikeThrough\" },\n];\n\nexport function EditorToolbar({\n actions = DEFAULT_ACTIONS,\n onAction,\n children,\n className,\n showSourceToggle = true,\n showFullScreenToggle = false,\n}: EditorToolbarProps) {\n const { exec, showSource } = useEditor();\n\n return (\n <div\n data-react-fancy-editor-toolbar=\"\"\n className={cn(\n \"flex shrink-0 items-center gap-0.5 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n className,\n )}\n >\n {children ?? (\n <>\n {actions.map((action) => (\n <button\n key={`${action.command}-${action.commandArg ?? \"\"}`}\n type=\"button\"\n // Rich-text commands don't apply to the raw-source textarea.\n disabled={showSource}\n onClick={() => {\n if (onAction) {\n onAction(action.command);\n } else {\n exec(action.command, action.commandArg);\n }\n }}\n title={action.label}\n className={cn(\n \"inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors\",\n action.active\n ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n showSource && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n )}\n >\n {action.icon}\n </button>\n ))}\n {showSourceToggle && <EditorSourceToggle className=\"ml-auto\" />}\n {showFullScreenToggle && <EditorFullScreenToggle className={showSourceToggle ? undefined : \"ml-auto\"} />}\n </>\n )}\n </div>\n );\n}\n\nEditorToolbar.displayName = \"EditorToolbar\";\n","export function EditorToolbarSeparator() {\n return (\n <span\n data-react-fancy-editor-toolbar-separator=\"\"\n className=\"mx-1 h-5 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n />\n );\n}\n\nEditorToolbarSeparator.displayName = \"EditorToolbarSeparator\";\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CodeView } from \"../CodeView\";\nimport { useEditor } from \"./Editor.context\";\nimport { proseClasses, extensionEditorClasses } from \"./editor.utils\";\nimport type { EditorContentProps } from \"./Editor.types\";\n\nexport function EditorContent({ className, maxHeight: maxHeightProp, sourceClassName }: EditorContentProps) {\n const {\n contentRef,\n lineSpacing,\n placeholder,\n extensions,\n outputFormat,\n showSource,\n _initialHtml,\n _onInput,\n _sourceValue,\n _onSourceInput,\n fullScreen,\n } = useEditor();\n // Full screen means \"fill the viewport\": a height cap would leave the bottom\n // of the screen empty under a scrolled box.\n const maxHeight = fullScreen ? undefined : maxHeightProp;\n // Tracks which seed HTML is currently in the contentEditable. Seeding on the\n // seed VALUE (not a one-shot boolean) re-seeds when the source view rewrites\n // `value`, while still never re-seeding on plain keystrokes — typing leaves\n // `_initialHtml` untouched, so `seededHtml.current === _initialHtml` holds.\n const seededHtml = useRef<string | null>(null);\n\n useEffect(() => {\n // Source view replaces the contentEditable in the tree, so it unmounts.\n // Forget what we seeded — the div that returns is a fresh, empty one and\n // must always be re-seeded, even if `value` was left untouched.\n if (showSource) {\n seededHtml.current = null;\n return;\n }\n const el = contentRef.current;\n if (el && seededHtml.current !== _initialHtml) {\n el.innerHTML = _initialHtml;\n seededHtml.current = _initialHtml;\n }\n }, [contentRef, _initialHtml, showSource]);\n\n const extClasses = useMemo(\n () => extensionEditorClasses(extensions),\n [extensions],\n );\n\n if (showSource) {\n // Raw-source view — a syntax-highlighted code surface (HTML highlighted;\n // markdown/plain un-highlighted), built on the shared fancy-file-commons\n // primitives. It's a DIRECT child of the flex-column editor root (no\n // wrapper — a nested flex box collapses the fill), so `flex-auto` makes it\n // fill the editor body when height-constrained and grow with content\n // (≥ minHeight) when not. `maxHeight` caps + scrolls.\n return (\n <CodeView\n value={_sourceValue}\n onChange={_onSourceInput}\n language={outputFormat === \"html\" ? \"html\" : \"plaintext\"}\n placeholder={placeholder}\n maxHeight={maxHeight}\n className={cn(\"min-h-0 flex-auto\", sourceClassName)}\n />\n );\n }\n\n return (\n <div\n ref={contentRef}\n contentEditable\n suppressContentEditableWarning\n data-react-fancy-editor-content=\"\"\n data-placeholder={placeholder}\n onInput={_onInput}\n style={{\n lineHeight: lineSpacing,\n maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n }}\n className={cn(\n \"min-h-[120px] flex-auto overflow-y-auto px-4 py-3 text-sm outline-none\",\n \"focus:outline-none\",\n proseClasses,\n extClasses,\n \"empty:before:content-[attr(data-placeholder)] empty:before:text-zinc-400 empty:before:pointer-events-none\",\n className,\n )}\n />\n );\n}\n\nEditorContent.displayName = \"EditorContent\";\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { marked } from \"marked\";\nimport { cn } from \"../../utils/cn\";\nimport { sanitizeHtml } from \"../../utils/sanitize\";\nimport { useControllableState } from \"../../hooks\";\nimport { useFullScreen } from \"../../hooks/use-full-screen\";\nimport { FullScreenProvider } from \"../FullScreen/FullScreen.context\";\nimport { EditorContext } from \"./Editor.context\";\nimport { EditorToolbar } from \"./EditorToolbar\";\nimport { EditorToolbarSeparator } from \"./EditorToolbarSeparator\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport { EditorContent } from \"./EditorContent\";\nimport { EditorFullScreenToggle } from \"./EditorFullScreenToggle\";\nimport { htmlToMarkdown, detectFormat, markdownToEditorHtml, type MarkdownSource } from \"./editor.utils\";\nimport { mergeExtensions } from \"../ContentRenderer/extensions\";\nimport { ContentRenderer } from \"../ContentRenderer/ContentRenderer\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport type { EditorProps } from \"./Editor.types\";\n\ninterface Seed {\n html: string;\n /** Source map for source-preserving markdown output; null when there is none. */\n source: MarkdownSource | null;\n}\n\nfunction toHtml(\n value: string,\n outputFormat: \"html\" | \"markdown\",\n unsafe: boolean,\n valueFormat: \"markdown\" | \"html\" | \"auto\" = \"auto\",\n): Seed {\n if (!value) return { html: \"\", source: null };\n const sanitize = (html: string) => (unsafe ? html : sanitizeHtml(html));\n // An explicit valueFormat is authoritative — the sniff misclassifies\n // markdown that merely MENTIONS HTML-ish snippets (`<code>`, `<table`),\n // collapsing it into an innerHTML wall of text (#10).\n const format =\n valueFormat !== \"auto\"\n ? valueFormat\n : outputFormat === \"html\"\n ? \"html\"\n : detectFormat(value);\n if (format === \"html\") return { html: sanitize(value), source: null };\n // Markdown in, markdown out: tag each block with its source so untouched\n // blocks are emitted byte-identical.\n if (outputFormat === \"markdown\") return markdownToEditorHtml(value, sanitize);\n return { html: sanitize((marked.parse(value, { async: false }) as string).trim()), source: null };\n}\n\nfunction EditorRoot({\n children,\n className,\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n outputFormat = \"html\",\n valueFormat = \"auto\",\n lineSpacing = 1.6,\n placeholder,\n mode: modeProp,\n extensions: instanceExtensions,\n unsafe = false,\n showSource: showSourceProp,\n defaultShowSource = false,\n onShowSourceChange,\n fullScreen: fullScreenProp,\n defaultFullScreen = false,\n onFullScreenChange,\n fullScreenMode = \"overlay\",\n}: EditorProps) {\n const contentRef = useRef<HTMLDivElement | null>(null);\n const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);\n const [showSource, setShowSource] = useControllableState(\n showSourceProp,\n defaultShowSource,\n onShowSourceChange,\n );\n // Full screen is the element itself going `position: fixed`, not a portal:\n // reparenting would remount the contentEditable and lose the caret, the\n // browser's undo stack and the seeded HTML.\n const fs = useFullScreen<HTMLDivElement>({\n fullScreen: fullScreenProp,\n defaultFullScreen,\n onFullScreenChange,\n mode: fullScreenMode,\n });\n // View/edit mode — same resolution as the inputs: prop → <Form> context → \"edit\".\n const mode = useFieldMode(modeProp);\n const isView = mode === \"view\";\n\n // The value this editor last emitted through `onChange`. An incoming `value`\n // equal to it is our own keystroke echoing back; anything else came from\n // OUTSIDE — an async load, a host reset, a form repopulating.\n const lastEmitted = useRef<string | null>(null);\n\n // Bumped only on an external `value` change, so the seed memo below recomputes\n // for those and stays put while the user types. Without this, `value` was\n // excluded from the deps to avoid re-seeding on keystrokes, which also meant a\n // value arriving after mount was silently dropped and the editor stayed blank\n // forever (#15).\n const [externalSeed, setExternalSeed] = useState(0);\n useEffect(() => {\n if (value !== lastEmitted.current) setExternalSeed((n) => n + 1);\n }, [value]);\n\n const seed = useMemo(\n () => toHtml(value, outputFormat, unsafe, valueFormat),\n // Seed the contentEditable from the LIVE value when (re)entering edit mode —\n // and when returning from the raw-source view, which may have rewritten the\n // value out from under the rich-text surface. `value` itself stays out of\n // the deps so typing never re-seeds (which would fight the caret);\n // `externalSeed` covers the externally-driven case instead.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [isView, outputFormat, unsafe, valueFormat, showSource, externalSeed],\n );\n const initialHtml = seed.html;\n const seedSource = seed.source;\n\n const extensions = useMemo(\n () => mergeExtensions(instanceExtensions),\n [instanceExtensions],\n );\n\n const getOutputValue = useCallback(\n (html: string): string => {\n return outputFormat === \"markdown\" ? htmlToMarkdown(html, seedSource) : html;\n },\n [outputFormat, seedSource],\n );\n\n const handleInput = useCallback(() => {\n const el = contentRef.current;\n if (!el) return;\n const next = getOutputValue(el.innerHTML);\n // Record what we emitted BEFORE publishing it, so the value coming back in\n // is recognised as our own and does not trigger a re-seed mid-keystroke.\n lastEmitted.current = next;\n setValue(next);\n }, [setValue, getOutputValue]);\n\n const exec = useCallback(\n (command: string, arg?: string) => {\n const el = contentRef.current;\n if (!el) return;\n el.focus();\n document.execCommand(command, false, arg);\n handleInput();\n },\n [handleInput],\n );\n\n const insertText = useCallback(\n (text: string) => {\n const el = contentRef.current;\n if (!el) return;\n el.focus();\n document.execCommand(\"insertText\", false, text);\n handleInput();\n },\n [handleInput],\n );\n\n // The source textarea edits `value` directly — it is already the canonical\n // source in `outputFormat` (html or markdown), so no conversion round-trip.\n const handleSourceInput = useCallback(\n (next: string) => {\n // Also an internal emission — record it so typing in the source view is\n // not mistaken for an external change on every keystroke.\n lastEmitted.current = next;\n setValue(next);\n },\n [setValue],\n );\n\n const wrapSelection = useCallback(\n (before: string, after: string) => {\n const sel = window.getSelection();\n if (!sel || sel.rangeCount === 0) return;\n const range = sel.getRangeAt(0);\n const selectedText = range.toString();\n const el = contentRef.current;\n if (!el) return;\n el.focus();\n document.execCommand(\"insertText\", false, `${before}${selectedText}${after}`);\n handleInput();\n },\n [handleInput],\n );\n\n const contextValue = {\n contentRef,\n exec,\n insertText,\n wrapSelection,\n outputFormat,\n lineSpacing,\n placeholder,\n extensions,\n showSource,\n setShowSource,\n fullScreen: fs.fullScreen,\n setFullScreen: fs.setFullScreen,\n _initialHtml: initialHtml,\n _onInput: handleInput,\n _sourceValue: value,\n _onSourceInput: handleSourceInput,\n };\n\n // View mode — render the value read-only through ContentRenderer, matching the\n // editor's own format (markdown/html), instead of the editable toolbar+content\n // tree. Driven by `mode` / a `<Form mode=\"view\">`, exactly like the inputs.\n if (isView) {\n return (\n <FullScreenProvider value={fs}>\n <div\n {...fs.targetProps}\n data-react-fancy-editor=\"\"\n data-mode=\"view\"\n className={cn(\n \"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n className,\n // Read-only content taller than the viewport must scroll in place.\n fs.fullScreen && \"overflow-auto\",\n )}\n >\n <ContentRenderer\n value={value}\n format={valueFormat !== \"auto\" ? valueFormat : outputFormat}\n lineSpacing={lineSpacing}\n extensions={instanceExtensions}\n unsafe={unsafe}\n className=\"px-4 py-3\"\n />\n </div>\n </FullScreenProvider>\n );\n }\n\n return (\n <EditorContext.Provider value={contextValue}>\n <FullScreenProvider value={fs}>\n <div\n {...fs.targetProps}\n data-react-fancy-editor=\"\"\n data-mode=\"edit\"\n className={cn(\n \"flex flex-col overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n className,\n )}\n >\n {children}\n </div>\n </FullScreenProvider>\n </EditorContext.Provider>\n );\n}\n\nconst ToolbarWithSeparator = Object.assign(EditorToolbar, {\n Separator: EditorToolbarSeparator,\n});\n\nexport const Editor = Object.assign(EditorRoot, {\n Toolbar: ToolbarWithSeparator,\n Content: EditorContent,\n SourceToggle: EditorSourceToggle,\n FullScreenToggle: EditorFullScreenToggle,\n});\n"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var chunkZPBCZPMD_cjs = require('./chunk-ZPBCZPMD.cjs');
|
|
4
|
+
var chunkX6TGRSVH_cjs = require('./chunk-X6TGRSVH.cjs');
|
|
3
5
|
var chunkMCQJFMDP_cjs = require('./chunk-MCQJFMDP.cjs');
|
|
4
6
|
var chunkG7227RTY_cjs = require('./chunk-G7227RTY.cjs');
|
|
5
7
|
var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
|
|
@@ -43,6 +45,18 @@ function EditorSourceToggle({
|
|
|
43
45
|
);
|
|
44
46
|
}
|
|
45
47
|
EditorSourceToggle.displayName = "EditorSourceToggle";
|
|
48
|
+
function EditorFullScreenToggle({ className, enterIcon, exitIcon }) {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
chunkZPBCZPMD_cjs.FullScreenToggle,
|
|
51
|
+
{
|
|
52
|
+
"data-react-fancy-editor-fullscreen-toggle": "",
|
|
53
|
+
enterIcon,
|
|
54
|
+
exitIcon,
|
|
55
|
+
className: chunkZU5Q77OT_cjs.cn(className)
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
EditorFullScreenToggle.displayName = "EditorFullScreenToggle";
|
|
46
60
|
var DEFAULT_ACTIONS = [
|
|
47
61
|
{ icon: "B", label: "Bold", command: "bold" },
|
|
48
62
|
{ icon: "I", label: "Italic", command: "italic" },
|
|
@@ -54,7 +68,8 @@ function EditorToolbar({
|
|
|
54
68
|
onAction,
|
|
55
69
|
children,
|
|
56
70
|
className,
|
|
57
|
-
showSourceToggle = true
|
|
71
|
+
showSourceToggle = true,
|
|
72
|
+
showFullScreenToggle = false
|
|
58
73
|
}) {
|
|
59
74
|
const { exec, showSource } = useEditor();
|
|
60
75
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -88,7 +103,8 @@ function EditorToolbar({
|
|
|
88
103
|
},
|
|
89
104
|
`${action.command}-${action.commandArg ?? ""}`
|
|
90
105
|
)),
|
|
91
|
-
showSourceToggle && /* @__PURE__ */ jsxRuntime.jsx(EditorSourceToggle, { className: "ml-auto" })
|
|
106
|
+
showSourceToggle && /* @__PURE__ */ jsxRuntime.jsx(EditorSourceToggle, { className: "ml-auto" }),
|
|
107
|
+
showFullScreenToggle && /* @__PURE__ */ jsxRuntime.jsx(EditorFullScreenToggle, { className: showSourceToggle ? void 0 : "ml-auto" })
|
|
92
108
|
] })
|
|
93
109
|
}
|
|
94
110
|
);
|
|
@@ -104,7 +120,7 @@ function EditorToolbarSeparator() {
|
|
|
104
120
|
);
|
|
105
121
|
}
|
|
106
122
|
EditorToolbarSeparator.displayName = "EditorToolbarSeparator";
|
|
107
|
-
function EditorContent({ className, maxHeight, sourceClassName }) {
|
|
123
|
+
function EditorContent({ className, maxHeight: maxHeightProp, sourceClassName }) {
|
|
108
124
|
const {
|
|
109
125
|
contentRef,
|
|
110
126
|
lineSpacing,
|
|
@@ -115,8 +131,10 @@ function EditorContent({ className, maxHeight, sourceClassName }) {
|
|
|
115
131
|
_initialHtml,
|
|
116
132
|
_onInput,
|
|
117
133
|
_sourceValue,
|
|
118
|
-
_onSourceInput
|
|
134
|
+
_onSourceInput,
|
|
135
|
+
fullScreen
|
|
119
136
|
} = useEditor();
|
|
137
|
+
const maxHeight = fullScreen ? void 0 : maxHeightProp;
|
|
120
138
|
const seededHtml = react.useRef(null);
|
|
121
139
|
react.useEffect(() => {
|
|
122
140
|
if (showSource) {
|
|
@@ -194,7 +212,11 @@ function EditorRoot({
|
|
|
194
212
|
unsafe = false,
|
|
195
213
|
showSource: showSourceProp,
|
|
196
214
|
defaultShowSource = false,
|
|
197
|
-
onShowSourceChange
|
|
215
|
+
onShowSourceChange,
|
|
216
|
+
fullScreen: fullScreenProp,
|
|
217
|
+
defaultFullScreen = false,
|
|
218
|
+
onFullScreenChange,
|
|
219
|
+
fullScreenMode = "overlay"
|
|
198
220
|
}) {
|
|
199
221
|
const contentRef = react.useRef(null);
|
|
200
222
|
const [value, setValue] = chunkSNHU2AI4_cjs.useControllableState(controlledValue, defaultValue, onChange);
|
|
@@ -203,6 +225,12 @@ function EditorRoot({
|
|
|
203
225
|
defaultShowSource,
|
|
204
226
|
onShowSourceChange
|
|
205
227
|
);
|
|
228
|
+
const fs = chunkX6TGRSVH_cjs.useFullScreen({
|
|
229
|
+
fullScreen: fullScreenProp,
|
|
230
|
+
defaultFullScreen,
|
|
231
|
+
onFullScreenChange,
|
|
232
|
+
mode: fullScreenMode
|
|
233
|
+
});
|
|
206
234
|
const mode = chunkL3V3BYVS_cjs.useFieldMode(modeProp);
|
|
207
235
|
const isView = mode === "view";
|
|
208
236
|
const lastEmitted = react.useRef(null);
|
|
@@ -291,20 +319,25 @@ function EditorRoot({
|
|
|
291
319
|
extensions,
|
|
292
320
|
showSource,
|
|
293
321
|
setShowSource,
|
|
322
|
+
fullScreen: fs.fullScreen,
|
|
323
|
+
setFullScreen: fs.setFullScreen,
|
|
294
324
|
_initialHtml: initialHtml,
|
|
295
325
|
_onInput: handleInput,
|
|
296
326
|
_sourceValue: value,
|
|
297
327
|
_onSourceInput: handleSourceInput
|
|
298
328
|
};
|
|
299
329
|
if (isView) {
|
|
300
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
330
|
+
return /* @__PURE__ */ jsxRuntime.jsx(chunkZPBCZPMD_cjs.FullScreenProvider, { value: fs, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
301
331
|
"div",
|
|
302
332
|
{
|
|
333
|
+
...fs.targetProps,
|
|
303
334
|
"data-react-fancy-editor": "",
|
|
304
335
|
"data-mode": "view",
|
|
305
336
|
className: chunkZU5Q77OT_cjs.cn(
|
|
306
337
|
"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
|
|
307
|
-
className
|
|
338
|
+
className,
|
|
339
|
+
// Read-only content taller than the viewport must scroll in place.
|
|
340
|
+
fs.fullScreen && "overflow-auto"
|
|
308
341
|
),
|
|
309
342
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
310
343
|
chunkMCQJFMDP_cjs.ContentRenderer,
|
|
@@ -318,11 +351,12 @@ function EditorRoot({
|
|
|
318
351
|
}
|
|
319
352
|
)
|
|
320
353
|
}
|
|
321
|
-
);
|
|
354
|
+
) });
|
|
322
355
|
}
|
|
323
|
-
return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
356
|
+
return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(chunkZPBCZPMD_cjs.FullScreenProvider, { value: fs, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
324
357
|
"div",
|
|
325
358
|
{
|
|
359
|
+
...fs.targetProps,
|
|
326
360
|
"data-react-fancy-editor": "",
|
|
327
361
|
"data-mode": "edit",
|
|
328
362
|
className: chunkZU5Q77OT_cjs.cn(
|
|
@@ -331,7 +365,7 @@ function EditorRoot({
|
|
|
331
365
|
),
|
|
332
366
|
children
|
|
333
367
|
}
|
|
334
|
-
) });
|
|
368
|
+
) }) });
|
|
335
369
|
}
|
|
336
370
|
var ToolbarWithSeparator = Object.assign(EditorToolbar, {
|
|
337
371
|
Separator: EditorToolbarSeparator
|
|
@@ -339,10 +373,11 @@ var ToolbarWithSeparator = Object.assign(EditorToolbar, {
|
|
|
339
373
|
var Editor = Object.assign(EditorRoot, {
|
|
340
374
|
Toolbar: ToolbarWithSeparator,
|
|
341
375
|
Content: EditorContent,
|
|
342
|
-
SourceToggle: EditorSourceToggle
|
|
376
|
+
SourceToggle: EditorSourceToggle,
|
|
377
|
+
FullScreenToggle: EditorFullScreenToggle
|
|
343
378
|
});
|
|
344
379
|
|
|
345
380
|
exports.Editor = Editor;
|
|
346
381
|
exports.useEditor = useEditor;
|
|
347
|
-
//# sourceMappingURL=chunk-
|
|
348
|
-
//# sourceMappingURL=chunk-
|
|
382
|
+
//# sourceMappingURL=chunk-BMVYOVSW.cjs.map
|
|
383
|
+
//# sourceMappingURL=chunk-BMVYOVSW.cjs.map
|