50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T40e0,'use client'; import * as React from 'react'; import type { TFootnoteElement } from '@platejs/footnote'; import { PathApi, type Path } from 'platejs'; import { FootnoteReferencePlugin } from '@platejs/footnote/react'; import type { PlateEditor, PlateElementProps } from 'platejs/react'; import { PlateElement, useEditorSelector, useFocused, useNavigationHighlight, usePath, useSelected, } from 'platejs/react'; import { HoverCard, HoverCardContent, HoverCardTrigger, } from '@/components/ui/hover-card'; import { Popover, PopoverAnchor, PopoverContent, } from '@/components/ui/popover'; import { Command, CommandGroup, CommandItem, CommandList, } from '@/components/ui/command'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { InlineCombobox, InlineComboboxContent, InlineComboboxEmpty, InlineComboboxGroup, InlineComboboxInput, InlineComboboxItem, } from '@/registry/ui/inline-combobox'; const NUMERIC_FOOTNOTE_QUERY = /^\d+$/; const getNavigationAttributes = ( attributes: PlateElementProps['attributes'], navigationHighlight: ReturnType ) => ({ ...attributes, 'data-nav-cycle': navigationHighlight ? String(navigationHighlight.cycle) : undefined, 'data-nav-highlight': navigationHighlight?.variant, 'data-nav-pulse': navigationHighlight ? String(navigationHighlight.pulse) : undefined, 'data-nav-target': navigationHighlight ? 'true' : undefined, style: { ...(attributes.style as React.CSSProperties | undefined), ['--plate-nav-feedback-duration' as const]: navigationHighlight ? `${navigationHighlight.duration}ms` : undefined, } as React.CSSProperties, }); const getFootnotePreviewLabel = (text?: string) => { const normalized = text?.replace(/\s+/g, ' ').trim(); if (!normalized) return 'Empty footnote'; return normalized.length > 48 ? `${normalized.slice(0, 45).trimEnd()}...` : normalized; }; const getReferenceContextLabel = ( editor: PlateEditor, path: Path, index: number ) => { const parentEntry = editor.api.parent(path); const fallback = `Reference ${index + 1}`; if (!parentEntry) return fallback; const text = editor.api.string(parentEntry[1]); const normalized = text.replace(/\s+/g, ' ').trim(); if (!normalized) return fallback; return normalized.length > 56 ? `${normalized.slice(0, 53).trimEnd()}...` : normalized; }; export function FootnoteReferenceElement( props: PlateElementProps ) { const { editor, element } = props; const identifier = element.identifier ?? ''; const footnoteApi = editor.getApi(FootnoteReferencePlugin).footnote; const footnoteTransforms = editor.getTransforms( FootnoteReferencePlugin ).footnote; const [hoverOpen, setHoverOpen] = React.useState(false); const focused = useFocused(); const path = usePath(); const navigationHighlight = useNavigationHighlight(path); const fallbackResolved = identifier && footnoteApi ? footnoteApi.isResolved({ identifier }) : false; const fallbackPreviewText = identifier && footnoteApi ? footnoteApi.definitionText({ identifier }) : undefined; const livePreview = useEditorSelector(() => { if (!hoverOpen || !identifier) return null; return { isResolved: footnoteApi.isResolved({ identifier }), previewText: footnoteApi.definitionText({ identifier }), }; }, [hoverOpen, identifier]); const isResolved = livePreview?.isResolved ?? fallbackResolved; const previewText = livePreview?.previewText ?? fallbackPreviewText; const selected = useSelected(); const isSelectionInsideAtom = useEditorSelector( (currentEditor) => { const selection = currentEditor.selection; if (!path || !selection) return false; return ( PathApi.equals(selection.anchor.path, path.concat([0])) && PathApi.equals(selection.focus.path, path.concat([0])) && selection.anchor.offset === selection.focus.offset ); }, [path] ); return ( {props.children} {previewText ? (

{previewText}

) : identifier ? (

{isResolved ? (

No preview available.

) : ( )}

) : null} ); } export function FootnoteDefinitionElement( props: PlateElementProps ) { const { editor, element } = props; const identifier = element.identifier ?? ''; const footnoteApi = editor.getApi(FootnoteReferencePlugin).footnote; const footnoteTransforms = editor.getTransforms( FootnoteReferencePlugin ).footnote; const path = usePath(); const definitionState = useEditorSelector(() => { const isDuplicateDefinition = !!path && !!footnoteApi.isDuplicateDefinition?.({ path }); const referenceItems = !isDuplicateDefinition && identifier ? footnoteApi .references({ identifier }) .map((entry: any, index: number) => ({ index, label: getReferenceContextLabel(editor, entry[1], index), })) : []; return { duplicateReplacementIdentifier: isDuplicateDefinition ? footnoteApi.nextId?.() : undefined, isDuplicateDefinition, path, referenceItems, }; }, [identifier, path]); const navigationHighlight = useNavigationHighlight(definitionState?.path); const isDuplicateDefinition = !!definitionState?.isDuplicateDefinition; const duplicateReplacementIdentifier = definitionState?.duplicateReplacementIdentifier; const [referencePickerOpen, setReferencePickerOpen] = React.useState(false); const referenceItems = definitionState?.referenceItems ?? []; const hasMultipleReferences = referenceItems.length > 1; return (

{isDuplicateDefinition ? (

{identifier}

) : ( {hasMultipleReferences && referencePickerOpen ? ( event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()} > {referenceItems.map( (item: { index: number; label: string }) => ( event.preventDefault()} onSelect={() => { setReferencePickerOpen(false); footnoteTransforms.focusReference({ identifier, index: item.index, }); }} > {item.index + 1} {item.label} ) )} ) : null} )}

{isDuplicateDefinition ? (

{duplicateReplacementIdentifier && path ? ( ) : null}

) : null} {props.children}

); } export function FootnoteInputElement(props: PlateElementProps) { const { editor, element } = props; const [search, setSearch] = React.useState(''); const footnoteApi = editor.getApi(FootnoteReferencePlugin).footnote; const insertTransforms = editor.getTransforms(FootnoteReferencePlugin).insert; const identifiers = footnoteApi.identifiers?.() ?? []; const nextIdentifier = footnoteApi.nextId?.() ?? '1'; const query = search.trim(); const numericQuery = NUMERIC_FOOTNOTE_QUERY.test(query) ? query : ''; const proposedIdentifier = numericQuery || nextIdentifier; const showCreateOption = !identifiers.includes(proposedIdentifier); const filteredIdentifiers = identifiers.filter((identifier: string) => { if (!query) return true; const preview = footnoteApi.definitionText?.({ identifier }) ?? ''; return ( identifier.includes(query) || preview.toLowerCase().includes(query.toLowerCase()) ); }); const insertSelectedFootnote = React.useCallback( (identifier: string) => { const before = editor.selection && editor.api.before(editor.selection); if (before) { const range = editor.api.range(before, editor.selection); if (range && editor.api.string(range) === '[') { editor.tf.deleteBackward('character'); } } insertTransforms.footnote({ focusDefinition: false, identifier, }); }, [editor, insertTransforms] ); return ( {showCreateOption || filteredIdentifiers.length > 0 ? null : ( No footnotes )} {showCreateOption && (!query || numericQuery) ? ( insertSelectedFootnote(proposedIdentifier)} > [^{proposedIdentifier}] : New footnote... ) : null} {filteredIdentifiers.map((identifier: string) => ( insertSelectedFootnote(identifier)} > [^{identifier}] :{' '} {getFootnotePreviewLabel( footnoteApi.definitionText?.({ identifier }) )} ))} {props.children} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@platejs/footnote",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Ffootnote","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/footnote"}]]}]}]]}],["$","$L50",null,{"namespace":"@plate","registryDependencies":["button","command","hover-card","popover","https://platejs.org/r/inline-combobox.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/footnote-node.tsx","content":"$52","type":"registry:ui"},{"path":"src/registry/ui/footnote-node-static.tsx","content":"import * as React from 'react';\n\nimport type { TFootnoteElement } from '@platejs/footnote';\nimport type { SlateElementProps } from 'platejs/static';\n\nimport { SlateElement } from 'platejs/static';\n\nexport function FootnoteReferenceElementStatic(\n props: SlateElementProps\n) {\n const { element } = props;\n\n return (\n \n {props.children}[{element.identifier ?? ''}]\n \n );\n}\n\nexport function FootnoteDefinitionElementStatic(\n props: SlateElementProps\n) {\n const { element } = props;\n\n return (\n \n

\n {element.identifier ?? ''}\n

{props.children}

\n \n );\n}\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]