4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T2db7,'use client'; import * as React from 'react'; import { formatCodeBlock, isLangSupported } from '@platejs/code-block'; import { BracesIcon, Check, CheckIcon, CopyIcon } from 'lucide-react'; import { type TCodeBlockElement, type TCodeSyntaxLeaf, NodeApi } from 'platejs'; import { type PlateElementProps, type PlateLeafProps, PlateElement, PlateLeaf, } from 'platejs/react'; import { useEditorRef, useElement, useReadOnly } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@/components/ui/command'; import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { cn } from '@/lib/utils'; type CodeBlockElementProps = PlateElementProps & { showLanguageLabel?: boolean; }; const codeBlockLanguages: { label: string; value: string }[] = [ { label: 'Auto', value: 'auto' }, { label: 'Plain Text', value: 'plaintext' }, { label: 'ABAP', value: 'abap' }, { label: 'Agda', value: 'agda' }, { label: 'Arduino', value: 'arduino' }, { label: 'ASCII Art', value: 'ascii' }, { label: 'Assembly', value: 'x86asm' }, { label: 'Bash', value: 'bash' }, { label: 'BASIC', value: 'basic' }, { label: 'BNF', value: 'bnf' }, { label: 'C', value: 'c' }, { label: 'C#', value: 'csharp' }, { label: 'C++', value: 'cpp' }, { label: 'Clojure', value: 'clojure' }, { label: 'CoffeeScript', value: 'coffeescript' }, { label: 'Coq', value: 'coq' }, { label: 'CSS', value: 'css' }, { label: 'Dart', value: 'dart' }, { label: 'Dhall', value: 'dhall' }, { label: 'Diff', value: 'diff' }, { label: 'Docker', value: 'dockerfile' }, { label: 'EBNF', value: 'ebnf' }, { label: 'Elixir', value: 'elixir' }, { label: 'Elm', value: 'elm' }, { label: 'Erlang', value: 'erlang' }, { label: 'F#', value: 'fsharp' }, { label: 'Flow', value: 'flow' }, { label: 'Fortran', value: 'fortran' }, { label: 'Gherkin', value: 'gherkin' }, { label: 'GLSL', value: 'glsl' }, { label: 'Go', value: 'go' }, { label: 'GraphQL', value: 'graphql' }, { label: 'Groovy', value: 'groovy' }, { label: 'Haskell', value: 'haskell' }, { label: 'HCL', value: 'hcl' }, { label: 'HTML', value: 'html' }, { label: 'Idris', value: 'idris' }, { label: 'Java', value: 'java' }, { label: 'JavaScript', value: 'javascript' }, { label: 'JSON', value: 'json' }, { label: 'Julia', value: 'julia' }, { label: 'Kotlin', value: 'kotlin' }, { label: 'LaTeX', value: 'latex' }, { label: 'Less', value: 'less' }, { label: 'Lisp', value: 'lisp' }, { label: 'LiveScript', value: 'livescript' }, { label: 'LLVM IR', value: 'llvm' }, { label: 'Lua', value: 'lua' }, { label: 'Makefile', value: 'makefile' }, { label: 'Markdown', value: 'markdown' }, { label: 'Markup', value: 'markup' }, { label: 'MATLAB', value: 'matlab' }, { label: 'Mathematica', value: 'mathematica' }, { label: 'Mermaid', value: 'mermaid' }, { label: 'Nix', value: 'nix' }, { label: 'Notion Formula', value: 'notion' }, { label: 'Objective-C', value: 'objectivec' }, { label: 'OCaml', value: 'ocaml' }, { label: 'Pascal', value: 'pascal' }, { label: 'Perl', value: 'perl' }, { label: 'PHP', value: 'php' }, { label: 'PowerShell', value: 'powershell' }, { label: 'Prolog', value: 'prolog' }, { label: 'Protocol Buffers', value: 'protobuf' }, { label: 'PureScript', value: 'purescript' }, { label: 'Python', value: 'python' }, { label: 'R', value: 'r' }, { label: 'Racket', value: 'racket' }, { label: 'Reason', value: 'reasonml' }, { label: 'Ruby', value: 'ruby' }, { label: 'Rust', value: 'rust' }, { label: 'Sass', value: 'scss' }, { label: 'Scala', value: 'scala' }, { label: 'Scheme', value: 'scheme' }, { label: 'SCSS', value: 'scss' }, { label: 'Shell', value: 'shell' }, { label: 'Smalltalk', value: 'smalltalk' }, { label: 'Solidity', value: 'solidity' }, { label: 'SQL', value: 'sql' }, { label: 'Swift', value: 'swift' }, { label: 'TOML', value: 'toml' }, { label: 'TypeScript', value: 'typescript' }, { label: 'VB.Net', value: 'vbnet' }, { label: 'Verilog', value: 'verilog' }, { label: 'VHDL', value: 'vhdl' }, { label: 'Visual Basic', value: 'vbnet' }, { label: 'WebAssembly', value: 'wasm' }, { label: 'XML', value: 'xml' }, { label: 'YAML', value: 'yaml' }, ]; function getCodeBlockLanguageLabel(lang?: string | null) { const value = lang?.trim(); if (!value) return null; return ( codeBlockLanguages.find((language) => language.value === value)?.label ?? value ); } export function CodeBlockElement({ showLanguageLabel = true, ...props }: CodeBlockElementProps) { const { editor, element } = props; return (

          {props.children}

{isLangSupported(element.lang) && ( )} NodeApi.string(element)} />

); } function CodeBlockCombobox({ showLanguageLabel, }: { showLanguageLabel: boolean; }) { const [open, setOpen] = React.useState(false); const readOnly = useReadOnly(); const editor = useEditorRef(); const element = useElement(); const value = element.lang || 'plaintext'; const [searchValue, setSearchValue] = React.useState(''); const items = React.useMemo( () => codeBlockLanguages.filter( (language) => !searchValue || language.label.toLowerCase().includes(searchValue.toLowerCase()) ), [searchValue] ); if (readOnly) { if (!showLanguageLabel) return null; return ; } return ( setSearchValue('')} > setSearchValue(value)} placeholder="Search language..." /> No language found. {items.map((language) => ( { editor.tf.setNodes( { lang: value }, { at: element } ); setSearchValue(value); setOpen(false); }} > {language.label} ))} ); } function CodeBlockLanguageLabel({ lang }: { lang?: string | null }) { const label = getCodeBlockLanguageLabel(lang); if (!label) return null; return ( {label} ); } function CopyButton({ value, ...props }: { value: (() => string) | string } & Omit< React.ComponentProps, 'value' >) { const [hasCopied, setHasCopied] = React.useState(false); React.useEffect(() => { setTimeout(() => { setHasCopied(false); }, 2000); }, [hasCopied]); return ( ); } export function CodeLineElement(props: PlateElementProps) { return ; } export function CodeSyntaxLeaf(props: PlateLeafProps) { const tokenClassName = props.leaf.className as string; return ; } 52:T27dd,import * as React from 'react'; import type { TCodeBlockElement } from 'platejs'; import { type SlateElementProps, type SlateLeafProps, SlateElement, SlateLeaf, } from 'platejs/static'; type CodeBlockElementStaticProps = SlateElementProps & { showLanguageLabel?: boolean; }; const codeBlockLanguages: { label: string; value: string }[] = [ { label: 'Auto', value: 'auto' }, { label: 'Plain Text', value: 'plaintext' }, { label: 'ABAP', value: 'abap' }, { label: 'Agda', value: 'agda' }, { label: 'Arduino', value: 'arduino' }, { label: 'ASCII Art', value: 'ascii' }, { label: 'Assembly', value: 'x86asm' }, { label: 'Bash', value: 'bash' }, { label: 'BASIC', value: 'basic' }, { label: 'BNF', value: 'bnf' }, { label: 'C', value: 'c' }, { label: 'C#', value: 'csharp' }, { label: 'C++', value: 'cpp' }, { label: 'Clojure', value: 'clojure' }, { label: 'CoffeeScript', value: 'coffeescript' }, { label: 'Coq', value: 'coq' }, { label: 'CSS', value: 'css' }, { label: 'Dart', value: 'dart' }, { label: 'Dhall', value: 'dhall' }, { label: 'Diff', value: 'diff' }, { label: 'Docker', value: 'dockerfile' }, { label: 'EBNF', value: 'ebnf' }, { label: 'Elixir', value: 'elixir' }, { label: 'Elm', value: 'elm' }, { label: 'Erlang', value: 'erlang' }, { label: 'F#', value: 'fsharp' }, { label: 'Flow', value: 'flow' }, { label: 'Fortran', value: 'fortran' }, { label: 'Gherkin', value: 'gherkin' }, { label: 'GLSL', value: 'glsl' }, { label: 'Go', value: 'go' }, { label: 'GraphQL', value: 'graphql' }, { label: 'Groovy', value: 'groovy' }, { label: 'Haskell', value: 'haskell' }, { label: 'HCL', value: 'hcl' }, { label: 'HTML', value: 'html' }, { label: 'Idris', value: 'idris' }, { label: 'Java', value: 'java' }, { label: 'JavaScript', value: 'javascript' }, { label: 'JSON', value: 'json' }, { label: 'Julia', value: 'julia' }, { label: 'Kotlin', value: 'kotlin' }, { label: 'LaTeX', value: 'latex' }, { label: 'Less', value: 'less' }, { label: 'Lisp', value: 'lisp' }, { label: 'LiveScript', value: 'livescript' }, { label: 'LLVM IR', value: 'llvm' }, { label: 'Lua', value: 'lua' }, { label: 'Makefile', value: 'makefile' }, { label: 'Markdown', value: 'markdown' }, { label: 'Markup', value: 'markup' }, { label: 'MATLAB', value: 'matlab' }, { label: 'Mathematica', value: 'mathematica' }, { label: 'Mermaid', value: 'mermaid' }, { label: 'Nix', value: 'nix' }, { label: 'Notion Formula', value: 'notion' }, { label: 'Objective-C', value: 'objectivec' }, { label: 'OCaml', value: 'ocaml' }, { label: 'Pascal', value: 'pascal' }, { label: 'Perl', value: 'perl' }, { label: 'PHP', value: 'php' }, { label: 'PowerShell', value: 'powershell' }, { label: 'Prolog', value: 'prolog' }, { label: 'Protocol Buffers', value: 'protobuf' }, { label: 'PureScript', value: 'purescript' }, { label: 'Python', value: 'python' }, { label: 'R', value: 'r' }, { label: 'Racket', value: 'racket' }, { label: 'Reason', value: 'reasonml' }, { label: 'Ruby', value: 'ruby' }, { label: 'Rust', value: 'rust' }, { label: 'Sass', value: 'scss' }, { label: 'Scala', value: 'scala' }, { label: 'Scheme', value: 'scheme' }, { label: 'SCSS', value: 'scss' }, { label: 'Shell', value: 'shell' }, { label: 'Smalltalk', value: 'smalltalk' }, { label: 'Solidity', value: 'solidity' }, { label: 'SQL', value: 'sql' }, { label: 'Swift', value: 'swift' }, { label: 'TOML', value: 'toml' }, { label: 'TypeScript', value: 'typescript' }, { label: 'VB.Net', value: 'vbnet' }, { label: 'Verilog', value: 'verilog' }, { label: 'VHDL', value: 'vhdl' }, { label: 'Visual Basic', value: 'vbnet' }, { label: 'WebAssembly', value: 'wasm' }, { label: 'XML', value: 'xml' }, { label: 'YAML', value: 'yaml' }, ]; function getCodeBlockLanguageLabel(lang?: string | null) { const value = lang?.trim(); if (!value) return null; return ( codeBlockLanguages.find((language) => language.value === value)?.label ?? value ); } export function CodeBlockElementStatic({ showLanguageLabel = true, ...props }: CodeBlockElementStaticProps) { const languageLabel = getCodeBlockLanguageLabel(props.element.lang); return (

{showLanguageLabel && languageLabel && (

{languageLabel}

)}

          {props.children}

); } export function CodeLineElementStatic(props: SlateElementProps) { return ; } export function CodeSyntaxLeafStatic(props: SlateLeafProps) { const tokenClassName = props.leaf.className as string; return ; } /** * DOCX-compatible code block components. * Uses inline styles for proper rendering in Word documents. */ export function CodeBlockElementDocx( props: SlateElementProps ) { return (

{props.children}

); } export function CodeLineElementDocx(props: SlateElementProps) { return ( ); } // Syntax highlighting color map for common token types const syntaxColors: Record = { 'hljs-addition': '#22863a', 'hljs-attr': '#005cc5', 'hljs-attribute': '#005cc5', 'hljs-built_in': '#e36209', 'hljs-bullet': '#735c0f', 'hljs-comment': '#6a737d', 'hljs-deletion': '#b31d28', 'hljs-doctag': '#d73a49', 'hljs-emphasis': '#24292e', 'hljs-formula': '#6a737d', 'hljs-keyword': '#d73a49', 'hljs-literal': '#005cc5', 'hljs-meta': '#005cc5', 'hljs-name': '#22863a', 'hljs-number': '#005cc5', 'hljs-operator': '#005cc5', 'hljs-quote': '#22863a', 'hljs-regexp': '#032f62', 'hljs-section': '#005cc5', 'hljs-selector-attr': '#005cc5', 'hljs-selector-class': '#005cc5', 'hljs-selector-id': '#005cc5', 'hljs-selector-pseudo': '#22863a', 'hljs-selector-tag': '#22863a', 'hljs-string': '#032f62', 'hljs-strong': '#24292e', 'hljs-symbol': '#e36209', 'hljs-template-tag': '#d73a49', 'hljs-template-variable': '#d73a49', 'hljs-title': '#6f42c1', 'hljs-type': '#d73a49', 'hljs-variable': '#005cc5', }; // Convert regular spaces to non-breaking spaces to preserve indentation in Word const preserveSpaces = (text: string): string => { // Replace regular spaces with non-breaking spaces return text.replace(/ /g, '\u00A0'); }; export function CodeSyntaxLeafDocx(props: SlateLeafProps) { const tokenClassName = props.leaf.className as string; // Extract color from className let color: string | undefined; let fontWeight: string | undefined; let fontStyle: string | undefined; if (tokenClassName) { const classes = tokenClassName.split(' '); for (const cls of classes) { if (syntaxColors[cls]) { color = syntaxColors[cls]; } if (cls === 'hljs-strong' || cls === 'hljs-section') { fontWeight = 'bold'; } if (cls === 'hljs-emphasis') { fontStyle = 'italic'; } } } // Get the text content and preserve spaces const text = props.leaf.text as string; const preservedText = preserveSpaces(text); return ( {preservedText} ); } 4e:["$","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/code-block",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fcode-block","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/code-block"}]]}]}],["$","li","lowlight",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lowlight","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":"lowlight"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["command","popover","button"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/ui/code-block-node.tsx","content":"$51","type":"registry:ui"},{"path":"src/registry/ui/code-block-node-static.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]