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:T14c0,'use client'; import * as React from 'react'; import type { TComboboxInputElement, TMentionElement } from 'platejs'; import type { PlateElementProps } from 'platejs/react'; import { getMentionOnSelectItem } from '@platejs/mention'; import { IS_APPLE, KEYS } from 'platejs'; import { PlateElement, useFocused, useReadOnly, useSelected, } from 'platejs/react'; import { cn } from '@/lib/utils'; import { useMounted } from '@/registry/hooks/use-mounted'; import { inlineSuggestionVariants } from '@/registry/lib/suggestion'; import { InlineCombobox, InlineComboboxContent, InlineComboboxEmpty, InlineComboboxGroup, InlineComboboxInput, InlineComboboxItem, } from './inline-combobox'; export function MentionElement( props: PlateElementProps & { prefix?: string; } ) { const { element } = props; const selected = useSelected(); const focused = useFocused(); const mounted = useMounted(); const readOnly = useReadOnly(); return ( {mounted && IS_APPLE ? ( // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490 <> {props.children} {props.prefix} {element.value} ) : ( // Others like Android https://github.com/ianstormtaylor/slate/pull/5360 <> {props.prefix} {element.value} {props.children} )} ); } const onSelectItem = getMentionOnSelectItem(); export function MentionInputElement( props: PlateElementProps ) { const { editor, element } = props; const [search, setSearch] = React.useState(''); return ( No results {MENTIONABLES.map((item) => ( onSelectItem(editor, item, search)} > {item.text} ))} {props.children} ); } const MENTIONABLES = [ { key: '0', text: 'Aayla Secura' }, { key: '1', text: 'Adi Gallia' }, { key: '2', text: 'Admiral Dodd Rancit', }, { key: '3', text: 'Admiral Firmus Piett', }, { key: '4', text: 'Admiral Gial Ackbar', }, { key: '5', text: 'Admiral Ozzel' }, { key: '6', text: 'Admiral Raddus' }, { key: '7', text: 'Admiral Terrinald Screed', }, { key: '8', text: 'Admiral Trench' }, { key: '9', text: 'Admiral U.O. Statura', }, { key: '10', text: 'Agen Kolar' }, { key: '11', text: 'Agent Kallus' }, { key: '12', text: 'Aiolin and Morit Astarte', }, { key: '13', text: 'Aks Moe' }, { key: '14', text: 'Almec' }, { key: '15', text: 'Alton Kastle' }, { key: '16', text: 'Amee' }, { key: '17', text: 'AP-5' }, { key: '18', text: 'Armitage Hux' }, { key: '19', text: 'Artoo' }, { key: '20', text: 'Arvel Crynyd' }, { key: '21', text: 'Asajj Ventress' }, { key: '22', text: 'Aurra Sing' }, { key: '23', text: 'AZI-3' }, { key: '24', text: 'Bala-Tik' }, { key: '25', text: 'Barada' }, { key: '26', text: 'Bargwill Tomder' }, { key: '27', text: 'Baron Papanoida' }, { key: '28', text: 'Barriss Offee' }, { key: '29', text: 'Baze Malbus' }, { key: '30', text: 'Bazine Netal' }, { key: '31', text: 'BB-8' }, { key: '32', text: 'BB-9E' }, { key: '33', text: 'Ben Quadinaros' }, { key: '34', text: 'Berch Teller' }, { key: '35', text: 'Beru Lars' }, { key: '36', text: 'Bib Fortuna' }, { key: '37', text: 'Biggs Darklighter', }, { key: '38', text: 'Black Krrsantan' }, { key: '39', text: 'Bo-Katan Kryze' }, { key: '40', text: 'Boba Fett' }, { key: '41', text: 'Bobbajo' }, { key: '42', text: 'Bodhi Rook' }, { key: '43', text: 'Borvo the Hutt' }, { key: '44', text: 'Boss Nass' }, { key: '45', text: 'Bossk' }, { key: '46', text: 'Breha Antilles-Organa', }, { key: '47', text: 'Bren Derlin' }, { key: '48', text: 'Brendol Hux' }, { key: '49', text: 'BT-1' }, ]; 53:T457,import * as React from 'react'; import type { TMentionElement } from 'platejs'; import type { SlateElementProps } from 'platejs/static'; import { KEYS } from 'platejs'; import { SlateElement } from 'platejs/static'; import { cn } from '@/lib/utils'; import { inlineSuggestionVariants } from '@/registry/lib/suggestion'; export function MentionElementStatic( props: SlateElementProps & { prefix?: string; } ) { const { prefix } = props; const element = props.element; return ( {props.children} {prefix} {element.value} ); } 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/mention",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fmention","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/mention"}]]}]}]]}],["$","$L50",null,{"namespace":"@plate","registryDependencies":["https://platejs.org/r/suggestion.json","https://platejs.org/r/use-mounted.json","https://platejs.org/r/inline-combobox.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/mention-node.tsx","content":"$52","type":"registry:ui"},{"path":"src/registry/ui/mention-node-static.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]