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:T3beb,'use client'; import * as React from 'react'; import type { CodeDrawingType, TCodeDrawingElement, ViewMode, } from '@platejs/code-drawing'; import { VIEW_MODE, DEFAULT_MIN_HEIGHT, CODE_DRAWING_TYPE_ARRAY, VIEW_MODE_ARRAY, renderCodeDrawing, RENDER_DEBOUNCE_DELAY, downloadImage, DOWNLOAD_FILENAME, } from '@platejs/code-drawing'; import type { PlateElementProps } from 'platejs/react'; import { PlateElement, useEditorRef, useEditorSelector, useElement, useFocusedLast, useReadOnly, useSelected, } from 'platejs/react'; import debounce from 'lodash/debounce.js'; import { Trash2, DownloadIcon } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useIsMobile } from '@/hooks/use-mobile'; import { Popover, PopoverAnchor, PopoverContent, } from '@/components/ui/popover'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; function createDebouncedCodeDrawingRenderer( setImage: React.Dispatch>, setLoading: React.Dispatch>, setError: React.Dispatch> ) { let lastRequestId = 0; return debounce( async (code: string | undefined, drawingType: string | undefined) => { lastRequestId += 1; const requestId = lastRequestId; if (!code?.trim() || !drawingType) { setImage(''); setLoading(false); setError(null); return; } setLoading(true); setError(null); try { const imageData = await renderCodeDrawing( drawingType as CodeDrawingType, code ); if (lastRequestId === requestId) { setImage(imageData); setError(null); } } catch (err) { if (lastRequestId === requestId) { setError(err instanceof Error ? err.message : 'Rendering failed'); setImage(''); } } finally { if (lastRequestId === requestId) { setLoading(false); } } }, RENDER_DEBOUNCE_DELAY ); } function useCodeDrawingElement({ element }: { element: TCodeDrawingElement }) { const editor = useEditorRef(); const readOnly = useReadOnly(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [image, setImage] = React.useState(''); const debouncedRender = React.useMemo( () => createDebouncedCodeDrawingRenderer(setImage, setLoading, setError), [] ); React.useEffect(() => { debouncedRender(element.data?.code, element.data?.drawingType); return () => { debouncedRender.cancel(); }; }, [element.data?.code, element.data?.drawingType, debouncedRender]); const removeNode = () => { if (readOnly) return; const path = editor.api.findPath(element); if (path) { editor.tf.removeNodes({ at: path }); } }; return { loading, error, image, removeNode, }; } export function CodeDrawingElement( props: PlateElementProps ) { const { children } = props; const isMobile = useIsMobile(); const editor = useEditorRef(); const readOnly = useReadOnly(); const selected = useSelected(); const isFocusedLast = useFocusedLast(); const element = useElement(); const { removeNode, image, loading } = useCodeDrawingElement({ element }); const handleDownload = React.useCallback(() => { if (!image) return; downloadImage(image, DOWNLOAD_FILENAME); }, [image]); const handleCodeChange = React.useCallback( (code: string) => { const path = editor.api.findPath(element); if (path) { editor.tf.setNodes( { data: { ...element.data, code, }, }, { at: path } ); } }, [editor, element] ); const handleDrawingTypeChange = React.useCallback( (drawingType: CodeDrawingType) => { const path = editor.api.findPath(element); if (path) { editor.tf.setNodes( { data: { ...element.data, drawingType, }, }, { at: path } ); } }, [editor, element] ); const handleDrawingModeChange = React.useCallback( (drawingMode: ViewMode) => { const path = editor.api.findPath(element); if (path) { editor.tf.setNodes( { data: { ...element.data, drawingMode, }, }, { at: path } ); } }, [editor, element] ); const code = element.data?.code ?? ''; const drawingType = element.data?.drawingType ?? 'Mermaid'; const drawingMode = element.data?.drawingMode ?? 'Both'; const selectionCollapsed = useEditorSelector( (editor) => !editor.api.isExpanded(), [] ); const open = isFocusedLast && !readOnly && selected && selectionCollapsed; const content = (

{children} ); if (readOnly) { return content; } return ( {content} e.preventDefault()} >

{image && ( )}

); } function CodeDrawingPreview({ code, drawingType, drawingMode, image, loading, onCodeChange, onDrawingTypeChange, onDrawingModeChange, readOnly = false, isMobile = false, }: { code: string; drawingType: CodeDrawingType; drawingMode: ViewMode; image: string; loading: boolean; onCodeChange: (code: string) => void; onDrawingTypeChange: (type: CodeDrawingType) => void; onDrawingModeChange: (mode: ViewMode) => void; readOnly?: boolean; isMobile?: boolean; }) { const viewMode = drawingMode; const showCode = viewMode === VIEW_MODE.Both || viewMode === VIEW_MODE.Code; const showBorder = viewMode === VIEW_MODE.Both; const handleCodeChange = React.useCallback( (e: React.ChangeEvent) => { onCodeChange(e.target.value); }, [onCodeChange] ); const toolbar = readOnly ? null : ( ); return (

{showCode && ( )} {viewMode !== VIEW_MODE.Code && ( )}

); } function CodeDrawingToolbar({ drawingType, viewMode, readOnly = false, isMobile = false, onDrawingTypeChange, onDrawingModeChange, }: { drawingType: CodeDrawingType; viewMode: ViewMode; readOnly?: boolean; isMobile?: boolean; onDrawingTypeChange: (type: CodeDrawingType) => void; onDrawingModeChange: (mode: ViewMode) => void; }) { const [toolbarVisible, setToolbarVisible] = React.useState(false); const [languageSelectOpen, setLanguageSelectOpen] = React.useState(false); const [viewModeSelectOpen, setViewModeSelectOpen] = React.useState(false); const opacityClass = isMobile || toolbarVisible || languageSelectOpen || viewModeSelectOpen ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'; const positionClass = isMobile ? 'flex items-center gap-2' : 'absolute right-2 z-10 flex items-center gap-2'; return ( ); } function CodeDrawingTextarea({ code, viewMode, readOnly = false, isMobile = false, showBorder = false, onCodeChange, toolbar, }: { code: string; viewMode: ViewMode; readOnly?: boolean; isMobile?: boolean; showBorder?: boolean; onCodeChange: (e: React.ChangeEvent) => void; toolbar?: React.ReactNode; }) { const textareaRef = React.useRef(null); const isCodeOnlyMode = viewMode === VIEW_MODE.Code; const [internalCode, setInternalCode] = React.useState(code); const lastExternalCodeRef = React.useRef(code); React.useEffect(() => { if (code !== lastExternalCodeRef.current) { lastExternalCodeRef.current = code; setInternalCode(code); } }, [code]); const handleChange = React.useCallback( (e: React.ChangeEvent) => { const newValue = e.target.value; setInternalCode(newValue); onCodeChange(e); }, [onCodeChange] ); return (

{toolbar && isCodeOnlyMode && (

{toolbar}

)}

          
                      </code>
        </pre>
      </div>
    </div>
  );
}

function CodeDrawingPreviewArea({
  image,
  loading,
  code,
  viewMode,
  readOnly: _readOnly = false,
  isMobile = false,
  showBorder = false,
  toolbar,
}: {
  image: string;
  loading: boolean;
  code: string;
  viewMode: ViewMode;
  readOnly?: boolean;
  isMobile?: boolean;
  showBorder?: boolean;
  toolbar?: React.ReactNode;
}) {
  const showImage = viewMode === VIEW_MODE.Both || viewMode === VIEW_MODE.Image;

  return (
    <div
      className={`flex min-w-0 flex-1 flex-col ${isMobile ? '' : 'relative'} ${
        showBorder && isMobile ? 'border-b' : ''
      }`}
    >
      {toolbar && (
        <div
          className={
            isMobile
              ? 'mt-2 mb-2 flex justify-end px-2'
              : 'absolute right-2 z-10 mt-2'
          }
        >
          {toolbar}
        </div>
      )}

      {showImage ? (
        <div
          className={
            'flex flex-1 items-center justify-center rounded-md bg-muted/30 p-4'
          }
        >
          {loading && <div className="text-muted-foreground">Loading...</div>}
          {!loading && image && (
            <img
              src={image}
              alt="Code drawing"
              className="max-h-full max-w-full object-contain"
            />
          )}
          {!loading && !image && (
            <div className="text-muted-foreground">
              {code.trim() ? 'Rendering...' : 'Preview will appear here'}
            </div>
          )}
        </div>
      ) : (
        <div className="pointer-events-none flex flex-1 items-center justify-center rounded-md border bg-muted/30 p-4 opacity-0">
          {/* Placeholder to maintain height */}
        </div>
      )}
    </div>
  );
}
52:T4c0,import * as React from 'react';

import type { TCodeDrawingElement } from '@platejs/code-drawing';
import type { SlateElementProps } from 'platejs/static';

import { cn } from '@/lib/utils';
import { SlateElement } from 'platejs/static';

export function CodeDrawingElementStatic({
  children,
  ...props
}: SlateElementProps<TCodeDrawingElement>) {
  return (
    <SlateElement className="my-4 flex w-full items-stretch" {...props}>
      <div className={cn('flex w-full flex-col md:flex-row')}>
        <div className="relative h-full min-w-0 flex-1 rounded-md bg-muted/50 p-8 pr-4">
          <pre className="m-0 overflow-x-auto font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
            <code className="block w-full">
              {(props.element.data?.code as string) ||
                'Enter your code here...'}
            </code>
          </pre>
        </div>
        <div className="relative flex min-w-0 flex-1 items-center justify-center rounded-md border bg-muted/30 p-4">
          <div className="text-muted-foreground">
            {props.element.data?.drawingType || 'Mermaid'}
          </div>
        </div>
      </div>
      {children}
    </SlateElement>
  );
}
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-drawing",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fcode-drawing","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-drawing"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["popover","button","select","https://platejs.org/r/use-mobile.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/ui/code-drawing-node.tsx","content":"$51","type":"registry:ui"},{"path":"src/registry/ui/code-drawing-node-static.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>