feat: replace codemirror and image viewr, opt for simplier approach

frontend/src/components/nodes/render/views/ImageOutputView.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 import type { RenderingNodeState } from '../useRenderingNodeState'
 
 export type ImageOutputViewProps = {
@@ -13,8 +11,6 @@ export type ImageOutputViewProps = {
 
 export function ImageOutputView({
   state,
-  selected,
-  viewportFocused,
   onViewportFocus,
   onViewportBlur,
 }: ImageOutputViewProps) {
@@ -25,59 +21,10 @@ export function ImageOutputView({
       onFocus={onViewportFocus}
       onBlur={onViewportBlur}
     >
-      <TransformWrapper
-        initialScale={1}
-        initialPositionX={0}
-        initialPositionY={0}
-        minScale={0.2}
-        maxScale={4}
-        centerOnInit={false}
-        panning={{ disabled: !selected && !viewportFocused }}
-        wheel={{ disabled: !selected && !viewportFocused }}
-        doubleClick={{ disabled: !selected && !viewportFocused }}
-      >
-        {({ zoomIn, zoomOut, resetTransform }) => (
-          <>
-            <div className="react-flow__controls absolute bottom-2 left-2 z-10 nodrag nopan">
-              <button
-                type="button"
-                onClick={() => zoomIn()}
-                className="react-flow__controls-button"
-                title="Zoom in"
-              >
-                <ZoomIn className="size-3 max-w-[12px] max-h-[12px]" />
-              </button>
-              <button
-                type="button"
-                onClick={() => zoomOut()}
-                className="react-flow__controls-button"
-                title="Zoom out"
-              >
-                <ZoomOut className="size-3 max-w-[12px] max-h-[12px]" />
-              </button>
-              <button
-                type="button"
-                onClick={() => resetTransform()}
-                className="react-flow__controls-button"
-                title="Reset view (fit all)"
-              >
-                <RotateCcw className="size-3 max-w-[12px] max-h-[12px]" />
-              </button>
-            </div>
-            <div className="absolute inset-0 nodrag nopan overflow-hidden [&_.react-transform-component]:!w-full [&_.react-transform-component]:!h-full [&_.react-transform-wrapper]:!w-full [&_.react-transform-wrapper]:!h-full">
-              <TransformComponent
-                wrapperClass="!w-full !h-full"
-                contentClass="nodrag nopan !w-full !h-full !block !min-h-0"
-              >
-                <div
-                  className="rendering-diagram absolute inset-0 w-full h-full min-w-0 min-h-0 nodrag nopan"
-                  dangerouslySetInnerHTML={{ __html: state.displayContent ?? '' }}
-                />
-              </TransformComponent>
-            </div>
-          </>
-        )}
-      </TransformWrapper>
+      <div
+        className="absolute inset-0 nodrag nopan overflow-auto"
+        dangerouslySetInnerHTML={{ __html: state.displayContent ?? '' }}
+      />
     </div>
   )
 }

frontend/src/components/nodes/render/views/RawOutputView.tsx

@@ -1,10 +1,8 @@
 import React, { useMemo } from 'react'
-import CodeMirror from '@uiw/react-codemirror'
-import { javascript } from '@codemirror/lang-javascript'
-import { markdown } from '@codemirror/lang-markdown'
 import { Copy } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { plantumlLanguage } from '@/lib/plantumlLanguage'
+import { CodeEditor } from '@/components/editor/CodeEditor'
+import { type HighlightLanguage } from '@/lib/syntaxHighlight'
 import type { RenderingNodeState } from '../useRenderingNodeState'
 import { toast } from 'sonner'
 
@@ -15,21 +13,19 @@ export type RawOutputViewProps = {
   theme: 'light' | 'dark'
 }
 
-export function RawOutputView({ state, height, containerRef, theme }: RawOutputViewProps) {
-  const extensions = useMemo(() => {
-    const lang =
-      state.rawLanguage === 'wireframe'
-        ? javascript()
-        : state.rawLanguage === 'plantuml'
-          ? plantumlLanguage.extension
-          : markdown()
-    return [lang]
-  }, [state.rawLanguage])
+function languageForRaw(rawLanguage: string): HighlightLanguage {
+  if (rawLanguage === 'wireframe') return 'javascript'
+  if (rawLanguage === 'plantuml') return 'plantuml'
+  return 'markdown'
+}
+
+export function RawOutputView({ state, height, containerRef }: RawOutputViewProps) {
+  const language = useMemo(() => languageForRaw(state.rawLanguage), [state.rawLanguage])
 
   return (
     <div
       ref={containerRef}
-      className="relative min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input"
+      className="relative min-h-0 flex-1 w-full nodrag nopan overflow-auto border-t border-input"
     >
       <Button
         type="button"
@@ -50,15 +46,16 @@ export function RawOutputView({ state, height, containerRef, theme }: RawOutputV
       >
         <Copy className="size-3.5" />
       </Button>
-      <CodeMirror
+      <CodeEditor
         value={state.rawDisplayContent}
-        height={`${height}px`}
-        theme={theme}
-        extensions={extensions}
+        onValueChange={() => {}}
+        language={language}
         readOnly
-        editable={false}
-        basicSetup={{ lineNumbers: true, foldGutter: false }}
-        className="text-xs [&_.cm-editor]:outline-none [&_.cm-editor]:cursor-text [&_.cm-gutters]:border-0 [&_.cm-scroller]:min-h-0"
+        minHeight={height}
+        style={{ fontSize: 12 }}
+        textareaClassName="text-xs outline-none border-0 resize-none nodrag nopan"
+        preClassName="text-xs nodrag nopan min-h-0"
+        className="min-h-0 w-full"
       />
     </div>
   )