Code Drawing Node

1'use client';
2 
3import * as React from 'react';
4 
5import type {
6  CodeDrawingType,
7  TCodeDrawingElement,
8  ViewMode,
9} from '@platejs/code-drawing';
10import {
11  VIEW_MODE,
12  DEFAULT_MIN_HEIGHT,
13  CODE_DRAWING_TYPE_ARRAY,
14  VIEW_MODE_ARRAY,
15  renderCodeDrawing,
16  RENDER_DEBOUNCE_DELAY,
17  downloadImage,
18  DOWNLOAD_FILENAME,
19} from '@platejs/code-drawing';
20import type { PlateElementProps } from 'platejs/react';
21import {
22  PlateElement,
23  useEditorRef,
24  useEditorSelector,
25  useElement,
26  useFocusedLast,
27  useReadOnly,
28  useSelected,
29} from 'platejs/react';
30import debounce from 'lodash/debounce.js';
31import { Trash2, DownloadIcon } from 'lucide-react';
32 
33import { Button } from '@/components/ui/button';
34import { useIsMobile } from '@/hooks/use-mobile';
35import {
36  Popover,
37  PopoverAnchor,
38  PopoverContent,
39} from '@/components/ui/popover';
40import {
41  Select,
42  SelectContent,
43  SelectItem,
44  SelectTrigger,
45  SelectValue,
46} from '@/components/ui/select';
47 
48function createDebouncedCodeDrawingRenderer(
49  setImage: React.Dispatch<React.SetStateAction<string>>,
50  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
51  setError: React.Dispatch<React.SetStateAction<string | null>>
52) {
53  let lastRequestId = 0;
54 
55  return debounce(
56    async (code: string | undefined, drawingType: string | undefined) => {
57      lastRequestId += 1;
58      const requestId = lastRequestId;
59 
60      if (!code?.trim() || !drawingType) {
61        setImage('');
62        setLoading(false);
63        setError(null);
64        return;
65      }
66 
67      setLoading(true);
68      setError(null);
69 
70      try {
71        const imageData = await renderCodeDrawing(
72          drawingType as CodeDrawingType,
73          code
74        );
75 
76        if (lastRequestId === requestId) {
77          setImage(imageData);
78          setError(null);
79        }
80      } catch (err) {
81        if (lastRequestId === requestId) {
82          setError(err instanceof Error ? err.message : 'Rendering failed');
83          setImage('');
84        }
85      } finally {
86        if (lastRequestId === requestId) {
87          setLoading(false);
88        }
89      }
90    },
91    RENDER_DEBOUNCE_DELAY
92  );
93}
94 
95function useCodeDrawingElement({ element }: { element: TCodeDrawingElement }) {
96  const editor = useEditorRef();
97  const readOnly = useReadOnly();
98  const [loading, setLoading] = React.useState(false);
99  const [error, setError] = React.useState<string | null>(null);
100  const [image, setImage] = React.useState<string>('');
101 
102  const debouncedRender = React.useMemo(
103// … truncated