51: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"] 52: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"] 53:T2583,'use client'; import * as React from 'react'; import { cva } from 'class-variance-authority'; import { CornerDownLeftIcon } from 'lucide-react'; import type { AnyPluginConfig, TElement, TSuggestionData, TSuggestionText, WithRequiredKey, } from 'platejs'; import { KEYS } from 'platejs'; import type { PlateEditor, PlateLeafProps, RenderNodeWrapper, } from 'platejs/react'; import { SuggestionPlugin } from '@platejs/suggestion/react'; import { PlateLeaf, useEditorPlugin, usePluginOption } from 'platejs/react'; import { cn } from '@/lib/utils'; import type { SuggestionConfig } from '@/registry/components/editor/plugins/suggestion-kit'; import { voidRemoveSuggestionOverlayVariants } from '@/registry/ui/suggestion-node-static'; const suggestionPlugin = SuggestionPlugin as WithRequiredKey; export const suggestionVariants = cva( cn( 'bg-emerald-100 text-emerald-700 no-underline transition-colors duration-200' ), { defaultVariants: { insertActive: false, remove: false, removeActive: false, }, variants: { insertActive: { false: '', true: 'bg-emerald-200/80', }, remove: { false: '', true: 'bg-red-100 text-red-700', }, removeActive: { false: '', true: 'bg-red-200/80 no-underline', }, }, } ); export function getBlockSuggestionWrapperClassName({ elementType, isActive, isHover, isInsert, isRemove, }: { elementType?: string; isActive: boolean; isHover: boolean; isInsert: boolean; isRemove: boolean; }) { return cn( elementType === KEYS.columnGroup && 'flex size-full rounded', suggestionVariants({ insertActive: isInsert && (isActive || isHover), remove: isRemove, removeActive: (isActive || isHover) && isRemove, }) ); } export function isVoidRemoveSuggestion(editor: PlateEditor, element: TElement) { return ( editor.getApi(SuggestionPlugin).suggestion.suggestionData(element)?.type === 'remove' ); } export function VoidRemoveSuggestionOverlay({ editor, element, }: { editor: PlateEditor; element: TElement; }) { const active = editor.api.isVoid(element) && !editor.api.isInline(element) && isVoidRemoveSuggestion(editor, element); if (!active) return null; return (

); } export function SuggestionLineBreakAnchor({ badgeProps, children, className, }: { badgeProps?: React.ComponentProps<'span'>; children: React.ReactNode; className?: string; }) { const badge = ( ); return ( <> {children} {badge} ); } function SuggestionLineBreakElementAnchor({ badgeProps, children, className, }: { badgeProps?: React.ComponentProps<'span'>; children: React.ReactElement; className?: string; }) { if (!React.isValidElement(children)) return children; const badge = ( ); if (children.type === 'ol' || children.type === 'ul') { const childNodes = React.Children.toArray( (children.props as { children?: React.ReactNode }).children ); const lastIndex = childNodes.length - 1; const lastChild = childNodes[lastIndex]; if (!React.isValidElement(lastChild) || lastChild.type !== 'li') { return children; } const nextLastChild = React.cloneElement( lastChild as React.ReactElement, { children: ( <> {(lastChild.props as { children?: React.ReactNode }).children} {badge} ), } ); return React.cloneElement(children as React.ReactElement, { children: [...childNodes.slice(0, lastIndex), nextLastChild], }); } if (typeof children.type === 'string') { return ( <> {children} {badge} ); } return React.cloneElement(children as React.ReactElement, { lineBreakBadge: badge, }); } export function SuggestionLeaf(props: PlateLeafProps) { const { api, setOption } = useEditorPlugin(suggestionPlugin); const leaf = props.leaf; const leafId: string = api.suggestion.nodeId(leaf) ?? ''; const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId'); const hoverSuggestionId = usePluginOption(suggestionPlugin, 'hoverId'); const dataList = api.suggestion.dataList(leaf); const hasRemove = dataList.some((data) => data.type === 'remove'); const hasActive = dataList.some((data) => data.id === activeSuggestionId); const hasHover = dataList.some((data) => data.id === hoverSuggestionId); const diffOperation = { type: hasRemove ? 'delete' : 'insert' } as const; const Component = ({ delete: 'del', insert: 'ins', update: 'span' } as const)[ diffOperation.type ]; return ( setOption('hoverId', leafId), onMouseLeave: () => setOption('hoverId', null), }} > {props.children} ); } export const SuggestionLineBreak: RenderNodeWrapper = ({ api, element, }) => { if (!api.suggestion.isBlockSuggestion(element)) return; const suggestionData = element.suggestion as TSuggestionData; return function Component({ children }) { return ( {children} ); }; }; export function SuggestionLineBreakContent({ children, elementType, suggestionData, }: { children: React.ReactNode; elementType?: string; suggestionData: TSuggestionData; }) { const { isLineBreak, type } = suggestionData; const isRemove = type === 'remove'; const isInsert = type === 'insert'; const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId'); const hoverSuggestionId = usePluginOption(suggestionPlugin, 'hoverId'); const isActive = activeSuggestionId === suggestionData.id; const isHover = hoverSuggestionId === suggestionData.id; const { setOption } = useEditorPlugin(suggestionPlugin); const lineBreakBadgeClassName = cn( isInsert && 'bg-transparent! text-emerald-700! transition-colors duration-200', isInsert && (isActive || isHover) && 'bg-transparent! text-emerald-700!', isRemove && 'bg-transparent! text-red-700! transition-colors duration-200', isRemove && (isActive || isHover) && 'bg-transparent! text-red-700!' ); return ( <> {isLineBreak ? ( React.isValidElement(children) && typeof children.type !== 'string' ? ( { event.stopPropagation(); setOption('activeId', suggestionData.id); }, onMouseDown: (event) => { event.preventDefault(); }, }} className={lineBreakBadgeClassName} > {children} ) : React.isValidElement(children) && (children.type === 'ol' || children.type === 'ul') ? ( { event.stopPropagation(); setOption('activeId', suggestionData.id); }, onMouseDown: (event) => { event.preventDefault(); }, }} className={lineBreakBadgeClassName} > {children} ) : ( { event.stopPropagation(); setOption('activeId', suggestionData.id); }, onMouseDown: (event) => { event.preventDefault(); }, }} className={lineBreakBadgeClassName} > {children} ) ) : (

setOption('hoverId', suggestionData.id)} onMouseLeave={() => setOption('hoverId', null)} data-block-suggestion="true" > {children}

)} ); } 54:Td1f,import * as React from 'react'; import { cva } from 'class-variance-authority'; import type { TElement, TSuggestionText } from 'platejs'; import type { SlateLeafProps } from 'platejs/static'; import { BaseSuggestionPlugin } from '@platejs/suggestion'; import { SlateLeaf } from 'platejs/static'; import { cn } from '@/lib/utils'; export const voidRemoveSuggestionClass = 'relative overflow-hidden before:pointer-events-none before:absolute before:top-1/2 before:left-1/2 before:z-20 before:flex before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:items-center before:justify-center before:rounded-full before:bg-red-500/90 before:text-2xl before:font-semibold before:text-white before:shadow-lg before:content-["X"] after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:border after:border-red-300/80 after:bg-zinc-950/35 after:content-[""]'; export const voidRemoveSuggestionOverlayVariants = cva( 'pointer-events-none absolute inset-0 z-20 overflow-hidden rounded-[inherit]', { defaultVariants: { active: false, }, variants: { active: { false: 'hidden', true: 'before:-translate-x-1/2 before:-translate-y-1/2 before:pointer-events-none before:absolute before:top-1/2 before:left-1/2 before:z-20 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:bg-red-500/90 before:font-semibold before:text-2xl before:text-white before:shadow-lg before:content-["X"] after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:border after:border-red-300/80 after:bg-zinc-950/35 after:content-[""]', }, }, } ); export const voidRemoveSuggestionVariants = cva('', { defaultVariants: { active: false, }, variants: { active: { false: '', true: voidRemoveSuggestionClass, }, }, }); export function isStaticVoidRemoveSuggestion(element: TElement) { return ( (element as TElement & { suggestion?: { type?: string } }).suggestion ?.type === 'remove' ); } export function VoidRemoveSuggestionOverlayStatic({ editor, element, }: { editor: any; element: TElement; }) { const active = editor.api.isVoid(element) && !editor.api.isInline(element) && isStaticVoidRemoveSuggestion(element); if (!active) return null; return (

); } export function SuggestionLeafStatic(props: SlateLeafProps) { const { editor, leaf } = props; const dataList = editor .getApi(BaseSuggestionPlugin) .suggestion.dataList(leaf); const hasRemove = dataList.some((data) => data.type === 'remove'); const diffOperation = { type: hasRemove ? 'delete' : 'insert' } as const; const Component = ({ delete: 'del', insert: 'ins', update: 'span' } as const)[ diffOperation.type ]; return ( {props.children} ); } 50:["$","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/suggestion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fsuggestion","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/suggestion"}]]}]}]]}],["$","$L51",null,{"namespace":"@plate","registryDependencies":["https://platejs.org/r/suggestion.json","https://platejs.org/r/suggestion-kit.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ui/suggestion-node.tsx","content":"$53","type":"registry:ui"},{"path":"src/registry/ui/suggestion-node-static.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]