52: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"] 53: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"] 54:T5252,'use client'; import React from 'react'; import type { DropdownMenuItemProps, DropdownMenuProps, } from '@radix-ui/react-dropdown-menu'; import { useComposedRef } from '@udecode/cn'; import debounce from 'lodash/debounce.js'; import { CheckIcon, EraserIcon, PlusIcon } from 'lucide-react'; import { type PlateEditor, useEditorRef, useEditorSelector, } from 'platejs/react'; import { buttonVariants } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; import { ToolbarButton, ToolbarMenuGroup } from './toolbar'; const MAX_CUSTOM_COLORS = 19; const HEX_COLOR_RE = /^#[\da-f]{6}$/i; function normalizeColor(color: string): string { return color.toLowerCase(); } function isValidHexColor(color: string): boolean { return HEX_COLOR_RE.test(color); } function computeIsBrightColor(hex: string): boolean { if (!isValidHexColor(hex)) return false; const r = Number.parseInt(hex.slice(1, 3), 16); const g = Number.parseInt(hex.slice(3, 5), 16); const b = Number.parseInt(hex.slice(5, 7), 16); return (r * 299 + g * 587 + b * 114) / 1000 > 130; } function getEditorColorMarks(editor: PlateEditor, nodeType: string): string[] { const usedColors = new Set(); for (const [node] of editor.api.nodes({ at: [], match: (n) => 'text' in n && typeof (n as Record)[nodeType] === 'string', mode: 'all', })) { const color = (node as Record)[nodeType] as string; usedColors.add(normalizeColor(color)); } return Array.from(usedColors); } export function FontColorToolbarButton({ children, nodeType, tooltip, }: { nodeType: string; tooltip?: string; } & DropdownMenuProps) { const editor = useEditorRef(); const selectionDefined = useEditorSelector( (editor) => !!editor.selection, [] ); const color = useEditorSelector( (editor) => editor.api.mark(nodeType) as string, [nodeType] ); const [selectedColor, setSelectedColor] = React.useState(); const [updatedColor, setUpdatedColor] = React.useState(); const [open, setOpen] = React.useState(false); const [colorsQueue, setColorsQueue] = React.useState([]); const recordColorUsage = React.useCallback((color: string) => { const normalized = normalizeColor(color); if (!isValidHexColor(normalized)) return; setColorsQueue((prev) => { const filtered = prev .filter((c) => c !== normalized) .filter( (c) => !DEFAULT_COLORS.some((dc) => normalizeColor(dc.value) === c) ); return [normalized, ...filtered].slice(0, 30); }); }, []); const appendColors = React.useCallback((colors: string[]) => { setColorsQueue((prev) => { const normalized = colors.map(normalizeColor).filter(isValidHexColor); const existingSet = new Set(prev); const newColors = normalized .filter((c) => !existingSet.has(c)) .filter( (c) => !DEFAULT_COLORS.some((dc) => normalizeColor(dc.value) === c) ); return [...newColors, ...prev].slice(0, 30); }); }, []); const onToggle = React.useCallback( (value = !open) => { setOpen(value); if (value) { const colorUsed = getEditorColorMarks(editor, nodeType); appendColors(colorUsed); if (selectedColor) { recordColorUsage(normalizeColor(selectedColor)); } } if (!value) { setUpdatedColor(undefined); if (editor.selection) { setTimeout(() => { editor.tf.focus(); }, 100); } } }, [open, editor, nodeType, appendColors, selectedColor, recordColorUsage] ); const updateColor = React.useCallback( (value: string) => { if (editor.selection) { setSelectedColor(value); setUpdatedColor(value); editor.tf.select(editor.selection); editor.tf.addMarks({ [nodeType]: value }); } }, [editor, nodeType] ); const updateColorAndClose = React.useCallback( (value: string) => { updateColor(value); onToggle(); }, [onToggle, updateColor] ); const clearColor = React.useCallback(() => { if (editor.selection) { editor.tf.select(editor.selection); editor.tf.removeMarks(nodeType); onToggle(); } }, [editor, onToggle, nodeType]); React.useEffect(() => { if (selectionDefined) { // eslint-disable-next-line react-hooks/set-state-in-effect -- Preserve the mark color while menu focus clears editor selection. setSelectedColor(color); } }, [color, selectionDefined]); return ( {children} ); } function PureColorPicker({ className, clearColor, color, colors, colorsQueue, customColors, recordColorUsage, updateColor, updateCustomColor, updatedColor, ...props }: React.ComponentProps<'div'> & { colors: TColor[]; colorsQueue: string[]; customColors: TColor[]; clearColor: () => void; recordColorUsage: (color: string) => void; updateColor: (color: string) => void; updateCustomColor: (color: string) => void; color?: string; updatedColor?: string; }) { return (

{color && ( Clear )}

); } const ColorPicker = React.memo( PureColorPicker, (prev, next) => prev.color === next.color && prev.colors === next.colors && prev.colorsQueue === next.colorsQueue && prev.customColors === next.customColors && prev.updatedColor === next.updatedColor ); function ColorCustom({ className, color, colors, colorsQueue, customColors, recordColorUsage, updateColor, updateCustomColor, updatedColor, ...props }: { colors: TColor[]; colorsQueue: string[]; customColors: TColor[]; recordColorUsage: (color: string) => void; updateColor: (color: string) => void; updateCustomColor: (color: string) => void; color?: string; updatedColor?: string; } & React.ComponentPropsWithoutRef<'div'>) { const [value, setValue] = React.useState(color || '#000000'); const fullCustomColors = React.useMemo( () => colorsQueue .filter((c) => normalizeColor(c) !== normalizeColor(updatedColor || '')) .filter( (c) => !DEFAULT_COLORS.some( (dc) => normalizeColor(dc.value) === normalizeColor(c) ) ) .filter( (c) => !DEFAULT_CUSTOM_COLORS.some( (dc) => normalizeColor(dc.value) === normalizeColor(c) ) ) .map((c) => ({ isBrightColor: computeIsBrightColor(c), name: c, value: c, })) .slice( 0, MAX_CUSTOM_COLORS - customColors.length - (updatedColor ? 1 : 0) ), [colorsQueue, customColors, updatedColor] ); const isColorInCollections = React.useCallback( (targetColor: string) => colors.some( (c) => normalizeColor(c.value) === normalizeColor(targetColor) ) || customColors.some( (c) => normalizeColor(c.value) === normalizeColor(targetColor) ) || fullCustomColors.some( (c) => normalizeColor(c.value) === normalizeColor(targetColor) ), [colors, customColors, fullCustomColors] ); const customColor = React.useMemo(() => { if (!updatedColor || isColorInCollections(updatedColor)) { return null; } return updatedColor; }, [isColorInCollections, updatedColor]); const computedColors = React.useMemo( () => customColor ? [ ...customColors, { isBrightColor: computeIsBrightColor(customColor), name: customColor, value: customColor, }, ...fullCustomColors, ] : [...customColors, ...fullCustomColors], [customColor, fullCustomColors, customColors] ); const updateCustomColorDebounced = React.useMemo( () => debounce((value: string) => updateCustomColor(value), 100), [updateCustomColor] ); React.useEffect( () => () => { updateCustomColorDebounced.cancel(); }, [updateCustomColorDebounced] ); return (

{ updateColor(c); recordColorUsage(normalizeColor(c)); }} > { setValue(e.target.value); updateCustomColorDebounced(e.target.value); }} value={value} > { e.preventDefault(); }} > Custom

); } function ColorInput({ children, className, value = '#000000', ...props }: React.ComponentProps<'input'> & { className?: string }) { const inputRef = React.useRef(null); return (

{React.Children.map(children, (child) => { if (!child) return child; return React.cloneElement( child as React.ReactElement<{ onClick: () => void; }>, { onClick: () => inputRef.current?.click(), } ); })}

); } type TColor = { isBrightColor: boolean; name: string; value: string; }; function ColorDropdownMenuItem({ className, isBrightColor, isSelected, name, updateColor, value, ...props }: { isBrightColor: boolean; isSelected: boolean; value: string; updateColor: (color: string) => void; name?: string; } & DropdownMenuItemProps) { const content = ( { e.preventDefault(); updateColor(value); }} {...props} > {isSelected ? : null} ); return name ? ( {content} {name} ) : ( content ); } export function ColorDropdownMenuItems({ className, color, colors, updateColor, ...props }: { colors: TColor[]; updateColor: (color: string) => void; color?: string; } & React.ComponentProps<'div'>) { return (

{colors.map(({ isBrightColor, name, value }) => ( ))} {props.children}

); } export const DEFAULT_COLORS = [ { isBrightColor: false, name: 'black', value: '#000000', }, { isBrightColor: false, name: 'dark grey 4', value: '#434343', }, { isBrightColor: false, name: 'dark grey 3', value: '#666666', }, { isBrightColor: false, name: 'dark grey 2', value: '#999999', }, { isBrightColor: false, name: 'dark grey 1', value: '#B7B7B7', }, { isBrightColor: false, name: 'grey', value: '#CCCCCC', }, { isBrightColor: false, name: 'light grey 1', value: '#D9D9D9', }, { isBrightColor: true, name: 'light grey 2', value: '#EFEFEF', }, { isBrightColor: true, name: 'light grey 3', value: '#F3F3F3', }, { isBrightColor: true, name: 'white', value: '#FFFFFF', }, { isBrightColor: false, name: 'red berry', value: '#980100', }, { isBrightColor: false, name: 'red', value: '#FE0000', }, { isBrightColor: false, name: 'orange', value: '#FE9900', }, { isBrightColor: true, name: 'yellow', value: '#FEFF00', }, { isBrightColor: false, name: 'green', value: '#00FF00', }, { isBrightColor: false, name: 'cyan', value: '#00FFFF', }, { isBrightColor: false, name: 'cornflower blue', value: '#4B85E8', }, { isBrightColor: false, name: 'blue', value: '#1300FF', }, { isBrightColor: false, name: 'purple', value: '#9900FF', }, { isBrightColor: false, name: 'magenta', value: '#FF00FF', }, { isBrightColor: false, name: 'light red berry 3', value: '#E6B8AF', }, { isBrightColor: false, name: 'light red 3', value: '#F4CCCC', }, { isBrightColor: true, name: 'light orange 3', value: '#FCE4CD', }, { isBrightColor: true, name: 'light yellow 3', value: '#FFF2CC', }, { isBrightColor: true, name: 'light green 3', value: '#D9EAD3', }, { isBrightColor: false, name: 'light cyan 3', value: '#D0DFE3', }, { isBrightColor: false, name: 'light cornflower blue 3', value: '#C9DAF8', }, { isBrightColor: true, name: 'light blue 3', value: '#CFE1F3', }, { isBrightColor: true, name: 'light purple 3', value: '#D9D2E9', }, { isBrightColor: true, name: 'light magenta 3', value: '#EAD1DB', }, { isBrightColor: false, name: 'light red berry 2', value: '#DC7E6B', }, { isBrightColor: false, name: 'light red 2', value: '#EA9999', }, { isBrightColor: false, name: 'light orange 2', value: '#F9CB9C', }, { isBrightColor: true, name: 'light yellow 2', value: '#FFE598', }, { isBrightColor: false, name: 'light green 2', value: '#B7D6A8', }, { isBrightColor: false, name: 'light cyan 2', value: '#A1C4C9', }, { isBrightColor: false, name: 'light cornflower blue 2', value: '#A4C2F4', }, { isBrightColor: false, name: 'light blue 2', value: '#9FC5E8', }, { isBrightColor: false, name: 'light purple 2', value: '#B5A7D5', }, { isBrightColor: false, name: 'light magenta 2', value: '#D5A6BD', }, { isBrightColor: false, name: 'light red berry 1', value: '#CC4125', }, { isBrightColor: false, name: 'light red 1', value: '#E06666', }, { isBrightColor: false, name: 'light orange 1', value: '#F6B26B', }, { isBrightColor: false, name: 'light yellow 1', value: '#FFD966', }, { isBrightColor: false, name: 'light green 1', value: '#93C47D', }, { isBrightColor: false, name: 'light cyan 1', value: '#76A5AE', }, { isBrightColor: false, name: 'light cornflower blue 1', value: '#6C9EEB', }, { isBrightColor: false, name: 'light blue 1', value: '#6FA8DC', }, { isBrightColor: false, name: 'light purple 1', value: '#8D7CC3', }, { isBrightColor: false, name: 'light magenta 1', value: '#C27BA0', }, { isBrightColor: false, name: 'dark red berry 1', value: '#A61B00', }, { isBrightColor: false, name: 'dark red 1', value: '#CC0000', }, { isBrightColor: false, name: 'dark orange 1', value: '#E59138', }, { isBrightColor: false, name: 'dark yellow 1', value: '#F1C231', }, { isBrightColor: false, name: 'dark green 1', value: '#6AA74F', }, { isBrightColor: false, name: 'dark cyan 1', value: '#45818E', }, { isBrightColor: false, name: 'dark cornflower blue 1', value: '#3B78D8', }, { isBrightColor: false, name: 'dark blue 1', value: '#3E84C6', }, { isBrightColor: false, name: 'dark purple 1', value: '#664EA6', }, { isBrightColor: false, name: 'dark magenta 1', value: '#A64D78', }, { isBrightColor: false, name: 'dark red berry 2', value: '#84200D', }, { isBrightColor: false, name: 'dark red 2', value: '#990001', }, { isBrightColor: false, name: 'dark orange 2', value: '#B45F05', }, { isBrightColor: false, name: 'dark yellow 2', value: '#BF9002', }, { isBrightColor: false, name: 'dark green 2', value: '#38761D', }, { isBrightColor: false, name: 'dark cyan 2', value: '#124F5C', }, { isBrightColor: false, name: 'dark cornflower blue 2', value: '#1155CB', }, { isBrightColor: false, name: 'dark blue 2', value: '#0C5394', }, { isBrightColor: false, name: 'dark purple 2', value: '#351C75', }, { isBrightColor: false, name: 'dark magenta 2', value: '#741B47', }, { isBrightColor: false, name: 'dark red berry 3', value: '#5B0F00', }, { isBrightColor: false, name: 'dark red 3', value: '#660000', }, { isBrightColor: false, name: 'dark orange 3', value: '#783F04', }, { isBrightColor: false, name: 'dark yellow 3', value: '#7E6000', }, { isBrightColor: false, name: 'dark green 3', value: '#274E12', }, { isBrightColor: false, name: 'dark cyan 3', value: '#0D343D', }, { isBrightColor: false, name: 'dark cornflower blue 3', value: '#1B4487', }, { isBrightColor: false, name: 'dark blue 3', value: '#083763', }, { isBrightColor: false, name: 'dark purple 3', value: '#1F124D', }, { isBrightColor: false, name: 'dark magenta 3', value: '#4C1130', }, ]; const DEFAULT_CUSTOM_COLORS = [ { isBrightColor: false, name: 'dark orange 3', value: '#783F04', }, { isBrightColor: false, name: 'dark grey 3', value: '#666666', }, { isBrightColor: false, name: 'dark grey 2', value: '#999999', }, { isBrightColor: false, name: 'light cornflower blue 1', value: '#6C9EEB', }, { isBrightColor: false, name: 'dark magenta 3', value: '#4C1130', }, ]; 51:["$","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","@udecode/cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40udecode%2Fcn","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":"@udecode/cn"}]]}]}],["$","li","@platejs/basic-styles",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fbasic-styles","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/basic-styles"}]]}]}],["$","li","lodash",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lodash","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":"lodash"}]]}]}]]}],["$","$L52",null,{"namespace":"@plate","registryDependencies":["dropdown-menu","separator","button","tooltip","https://platejs.org/r/toolbar.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/font-color-toolbar-button.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]