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

2026-03-12 23:07:51 +01:00
parent b71d32da5e
commit 4dca9c6478
19 changed files with 464 additions and 709 deletions
--- a/frontend/src/components/editor/CodeEditor.tsx
+++ b/frontend/src/components/editor/CodeEditor.tsx
@@ -0,0 +1,102 @@
+/**
+ * Shared code editor with Nunjucks support by default.
+ * Uses react-simple-code-editor + Prism + prism-react-renderer; highlights base language + {{ }}, {% %}, {# #}.
+ * Wherever this editor is used, it provides the same features (syntax highlighting + Nunjucks).
+ * The parent (node) provides the expected base language for highlighting.
+ */
+import React, { useCallback, useRef } from 'react'
+import Editor from 'react-simple-code-editor'
+import { highlight, type HighlightLanguage } from '@/lib/syntaxHighlight'
+
+export type CodeEditorProps = {
+  value: string
+  onValueChange: (value: string) => void
+  /** Base language for syntax highlighting (Nunjucks is always applied on top). */
+  language: HighlightLanguage
+  /** Stable id for the underlying textarea (for insert-at-cursor). */
+  textareaId?: string
+  readOnly?: boolean
+  placeholder?: string
+  padding?: number
+  tabSize?: number
+  insertSpaces?: boolean
+  ignoreTabKey?: boolean
+  style?: React.CSSProperties
+  className?: string
+  textareaClassName?: string
+  preClassName?: string
+  /** Minimum height so the container doesn't collapse before resize. */
+  minHeight?: number
+}
+
+const defaultStyle: React.CSSProperties = {
+  fontFamily: 'ui-monospace, monospace',
+  fontSize: 12,
+  lineHeight: 1.5,
+  overflow: 'auto',
+}
+
+export function CodeEditor({
+  value,
+  onValueChange,
+  language,
+  textareaId,
+  readOnly = false,
+  padding = 8,
+  tabSize = 2,
+  insertSpaces = true,
+  ignoreTabKey = false,
+  style,
+  className,
+  textareaClassName,
+  preClassName,
+  minHeight = 120,
+}: CodeEditorProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  const highlightCode = useCallback(
+    (code: string) => highlight(code, language),
+    [language]
+  )
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (readOnly) {
+        onValueChange(newValue)
+        return
+      }
+      const ta =
+        (textareaId ? document.getElementById(textareaId) : containerRef.current?.querySelector('textarea')) as HTMLTextAreaElement | null
+      const start = ta?.selectionStart ?? newValue.length
+      const end = ta?.selectionEnd ?? newValue.length
+      onValueChange(newValue)
+      requestAnimationFrame(() => {
+        const el = (textareaId
+          ? document.getElementById(textareaId)
+          : containerRef.current?.querySelector('textarea')) as HTMLTextAreaElement | null
+        if (el) el.setSelectionRange(start, end)
+      })
+    },
+    [onValueChange, readOnly, textareaId]
+  )
+
+  return (
+    <div ref={containerRef} className="code-editor" style={{ minHeight: 0 }}>
+      <Editor
+        value={value}
+        onValueChange={handleValueChange}
+        highlight={highlightCode}
+        tabSize={tabSize}
+        insertSpaces={insertSpaces}
+        ignoreTabKey={ignoreTabKey}
+        padding={padding}
+        readOnly={readOnly}
+        textareaId={textareaId}
+        style={{ ...defaultStyle, minHeight, ...style }}
+        className={className}
+        textareaClassName={textareaClassName}
+        preClassName={preClassName}
+      />
+    </div>
+  )
+}
--- a/frontend/src/components/graph/NodeStatusIndicator.tsx
+++ b/frontend/src/components/graph/NodeStatusIndicator.tsx
@@ -63,9 +63,7 @@ function BorderLoadingIndicator({
            container.firstElementChild instanceof HTMLElement
                ? container.firstElementChild
                : container
-        const cw = (target as HTMLElement).offsetWidth
-        const ch = (target as HTMLElement).offsetHeight
-        if (cw > 0 && ch > 0) setMeasured({ w: cw, h: ch })
+        // Use ResizeObserver only to avoid forced synchronous layout (offsetWidth/offsetHeight).
        const unObserve = observeResize(target, ({ width: w, height: h }) => {
            if (w > 0 && h > 0) setMeasured({ w, h })
        })
--- a/frontend/src/components/nodes/config/ConfigNode.tsx
+++ b/frontend/src/components/nodes/config/ConfigNode.tsx
@@ -1,19 +1,14 @@
-import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import { autocompletion } from '@codemirror/autocomplete'
-import CodeMirror from '@uiw/react-codemirror'
-import { javascript } from '@codemirror/lang-javascript'
-import { markdown } from '@codemirror/lang-markdown'
+import React, { useCallback, useContext, useId, useMemo } from 'react'
 import {
    AbstractNodeProps,
    createAbstractNodeComponent,
    getConnectedNodesByType,
    useAbstractNode,
 } from '@/lib/graph/abstractNode'
-import { useCodeMirrorInsert, type CodeMirrorEditorRef } from '@/hooks/useCodeMirrorInsert'
+import { CodeEditor } from '@/components/editor/CodeEditor'
+import { useSimpleEditorInsert } from '@/hooks/useSimpleEditorInsert'
 import { useResizeHeight } from '@/hooks/useResizeHeight'
-import { nunjucksCompletionSource } from '@/lib/nunjucksAutocomplete'
-import { plantumlLanguage } from '@/lib/plantumlLanguage'
-import { useTheme } from '@/lib/themeContext'
+import { type HighlightLanguage } from '@/lib/syntaxHighlight'
 import {
    getConfigTypes,
    getConfigContent,
@@ -59,14 +54,13 @@ function ConfigNodeComponent({ id, data, width, height, selected }: Props) {
    const configTypeId = getConfigTypeId(data ?? {})
    const configType = getConfigType(configTypeId)
    const content = getConfigContent(data ?? {})
-    const { theme } = useTheme()
    const { nodes, sourceIds, updateData } = useAbstractNode<ConfigNodeData>(id, data ?? {})
-    const editorRef = useRef<CodeMirrorEditorRef | null>(null)
+    const editorId = useId()
    const onChange = useCallback(
        (val: string) => updateData({ content: val, configType: configTypeId }),
        [updateData, configTypeId]
    )
-    const insertAt = useCodeMirrorInsert(editorRef, content, onChange)
+    const insertAt = useSimpleEditorInsert(editorId, content, onChange)

    const connectedConfigNodes = useMemo(
        () => getConnectedNodesByType(nodes, sourceIds, 'config'),
@@ -146,21 +140,8 @@ function ConfigNodeComponent({ id, data, width, height, selected }: Props) {
        [connectedConfigNodes],
    )
    const dataIds = useMemo(() => connectedDataNodes.map((n: any) => n.id), [connectedDataNodes])
-    const extensions = useMemo(() => {
-        const lang =
-            configTypeId === 'wireframe'
-                ? javascript()
-                : configType.language === 'plantuml'
-                    ? plantumlLanguage.extension
-                    : markdown()
-        return [
-            lang,
-            autocompletion({
-                override: [nunjucksCompletionSource(variableIds, configTitles, functionIds, dataIds)],
-                activateOnTyping: true,
-            }),
-        ]
-    }, [configTypeId, configType.language, variableIds, functionIds, configTitles, dataIds])
+    const highlightLang: HighlightLanguage =
+        configTypeId === 'wireframe' ? 'javascript' : configType.language === 'plantuml' ? 'plantuml' : 'markdown'
    const [editorHeight, editorContainerRef] = useResizeHeight(180)

    const insertBlocksContent = useMemo(() => {
@@ -326,16 +307,17 @@ function ConfigNodeComponent({ id, data, width, height, selected }: Props) {
                    />
                </div>

-                <div ref={editorContainerRef as React.RefObject<HTMLDivElement>} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
-                    <CodeMirror
-                        ref={editorRef}
+                <div ref={editorContainerRef as React.RefObject<HTMLDivElement>} className="min-h-0 flex-1 w-full nodrag nopan overflow-auto border-t border-input" style={{ minHeight: editorHeight }}>
+                    <CodeEditor
+                        textareaId={editorId}
                        value={content}
-                        height={`${editorHeight}px`}
-                        theme={theme}
-                        extensions={extensions}
-                        onChange={onChange}
-                        basicSetup={{ lineNumbers: true, foldGutter: false }}
-                        className="text-sm [&_.cm-editor]:outline-none [&_.cm-editor]:cursor-text [&_.cm-gutters]:border-0"
+                        onValueChange={onChange}
+                        language={highlightLang}
+                        minHeight={editorHeight}
+                        style={{ fontSize: 14 }}
+                        textareaClassName="text-sm outline-none border-0 resize-none nodrag nopan"
+                        preClassName="text-sm nodrag nopan"
+                        className="min-h-0 w-full"
                    />
                </div>
            </BaseNodeContent>
--- a/frontend/src/components/nodes/function/FunctionNode.tsx
+++ b/frontend/src/components/nodes/function/FunctionNode.tsx
@@ -1,15 +1,13 @@
-import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import CodeMirror from '@uiw/react-codemirror'
-import { javascript } from '@codemirror/lang-javascript'
+import React, { useCallback, useContext, useId, useMemo } from 'react'
 import {
    AbstractNodeProps,
    createAbstractNodeComponent,
    getConnectedNodesByType,
    useAbstractNode,
 } from '@/lib/graph/abstractNode'
-import { useCodeMirrorInsert, type CodeMirrorEditorRef } from '@/hooks/useCodeMirrorInsert'
+import { CodeEditor } from '@/components/editor/CodeEditor'
+import { useSimpleEditorInsert } from '@/hooks/useSimpleEditorInsert'
 import { useResizeHeight } from '@/hooks/useResizeHeight'
-import { useTheme } from '@/lib/themeContext'
 import {
    BaseNode,
    BaseNodeContent,
@@ -30,19 +28,20 @@ export type FunctionNodeData = { body?: string }

 type Props = AbstractNodeProps<FunctionNodeData>

+const LANGUAGE: HighlightLanguage = 'javascript'
+
 function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
    const flowUIContext = useContext(FlowUIContext)
    const setFullscreenNodeId = flowUIContext?.setFullscreenNodeId
    const supportsFullscreen = getNodeType('function')?.supportsFullscreen
    const bodyValue = data?.body ?? ''
-    const { theme } = useTheme()
    const { nodes, sourceIds, updateData } = useAbstractNode<FunctionNodeData>(id, data ?? {})
-    const editorRef = useRef<CodeMirrorEditorRef | null>(null)
+    const editorId = useId()
    const onChange = useCallback(
        (val: string) => updateData({ body: val }),
        [updateData]
    )
-    const insertAt = useCodeMirrorInsert(editorRef, bodyValue, onChange)
+    const insertAt = useSimpleEditorInsert(editorId, bodyValue, onChange)

    const connectedVariableNodes = useMemo(
        () => getConnectedNodesByType(nodes, sourceIds, 'variable'),
@@ -68,7 +67,6 @@ function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
        [insertAt]
    )

-    const extensions = useMemo(() => [javascript()], [])
    const [editorHeight, editorContainerRef] = useResizeHeight(120)
    const dimensions =
        width != null && height != null && width > 0 && height > 0
@@ -120,16 +118,17 @@ function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
                        }
                    />
                </div>
-                <div ref={editorContainerRef as React.RefObject<HTMLDivElement>} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
-                    <CodeMirror
-                        ref={editorRef}
+                <div ref={editorContainerRef as React.RefObject<HTMLDivElement>} className="min-h-0 flex-1 w-full nodrag nopan overflow-auto border-t border-input" style={{ minHeight: editorHeight }}>
+                    <CodeEditor
+                        textareaId={editorId}
                        value={bodyValue}
-                        height={`${editorHeight}px`}
-                        theme={theme}
-                        extensions={extensions}
-                        onChange={onChange}
-                        basicSetup={{ lineNumbers: true, foldGutter: false }}
-                        className="text-xs [&_.cm-editor]:outline-none [&_.cm-editor]:cursor-text [&_.cm-gutters]:border-0"
+                        onValueChange={onChange}
+                        language="javascript"
+                        minHeight={editorHeight}
+                        style={{ fontSize: 12 }}
+                        textareaClassName="text-xs outline-none border-0 resize-none nodrag nopan"
+                        preClassName="text-xs nodrag nopan"
+                        className="min-h-0 w-full"
                    />
                </div>
            </BaseNodeContent>
--- a/frontend/src/components/nodes/render/views/ImageOutputView.tsx
+++ b/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>
  )
 }
--- a/frontend/src/components/nodes/render/views/RawOutputView.tsx
+++ b/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>
  )
--- a/frontend/src/hooks/useCodeMirrorInsert.ts
+++ b/frontend/src/hooks/useCodeMirrorInsert.ts
@@ -1,51 +0,0 @@
-import { useCallback } from 'react'
-
-/**
- * Ref shape for @uiw/react-codemirror (view/state not in package types).
- * Use with: ref={editorRef} and type editorRef as React.MutableRefObject<CodeMirrorEditorRef | null>.
- */
-export type CodeMirrorEditorRef = {
-    view: {
-        state: {
-            doc: { length: number; toString(): string }
-            selection: { main: { from: number } }
-        }
-        dispatch: (arg: { changes: { from: number; to: number; insert: string } }) => void
-    }
-}
-
-export type InsertPosition = 'prepend' | 'append' | 'cursor'
-
-/**
- * Returns a stable insertAt(insertText, mode) that inserts text into the CodeMirror
- * editor at the given position (prepend, append, or cursor), then calls onChange
- * with the new content. Falls back to string concatenation when the editor ref
- * is not yet mounted.
- */
-export function useCodeMirrorInsert(
-    editorRef: React.RefObject<CodeMirrorEditorRef | null>,
-    currentContent: string,
-    onChange: (value: string) => void
-): (insertText: string, mode: InsertPosition) => void {
-    return useCallback(
-        (insertText: string, mode: InsertPosition) => {
-            const ref = editorRef.current
-            if (ref?.view) {
-                const view = ref.view
-                const doc = view.state.doc
-                const len = doc.length
-                const from =
-                    mode === 'prepend' ? 0 : mode === 'append' ? len : view.state.selection.main.from
-                view.dispatch({ changes: { from, to: from, insert: insertText } })
-                onChange(view.state.doc.toString())
-                return
-            }
-            if (mode === 'prepend') {
-                onChange(insertText + currentContent)
-            } else {
-                onChange(currentContent + insertText)
-            }
-        },
-        [currentContent, onChange]
-    )
-}
--- a/frontend/src/hooks/useResizeHeight.ts
+++ b/frontend/src/hooks/useResizeHeight.ts
@@ -21,8 +21,7 @@ export function useResizeHeight(
    const unobserve = observeResize(el, (size) => {
      if (size.height > 0) setHeight(size.height)
    })
-    const initial = el.getBoundingClientRect().height
-    if (initial > 0) setHeight(initial)
+    // Rely on ResizeObserver for initial size to avoid forced synchronous layout (getBoundingClientRect).
    return unobserve
  }, deps ?? [])

--- a/frontend/src/hooks/useSimpleEditorInsert.ts
+++ b/frontend/src/hooks/useSimpleEditorInsert.ts
@@ -0,0 +1,52 @@
+import { useCallback, useRef } from 'react'
+
+export type InsertPosition = 'prepend' | 'append' | 'cursor'
+
+/**
+ * Returns a stable insertAt(insertText, mode) that inserts text into the simple code editor
+ * (textarea identified by textareaId) at the given position, then calls onChange with the new content.
+ * Cursor is restored after the next render via a scheduled effect.
+ */
+export function useSimpleEditorInsert(
+  textareaId: string,
+  currentContent: string,
+  onChange: (value: string) => void
+): (insertText: string, mode: InsertPosition) => void {
+  const pendingCursorRef = useRef<number | null>(null)
+
+  const insertAt = useCallback(
+    (insertText: string, mode: InsertPosition) => {
+      const ta = document.getElementById(textareaId) as HTMLTextAreaElement | null
+      let start: number
+      let end: number
+      if (ta) {
+        start = mode === 'cursor' ? ta.selectionStart : mode === 'prepend' ? 0 : ta.value.length
+        end = mode === 'cursor' ? ta.selectionEnd : start
+      } else {
+        start = mode === 'prepend' ? 0 : currentContent.length
+        end = start
+      }
+      const newValue =
+        currentContent.slice(0, start) + insertText + currentContent.slice(end)
+      const nextCursor = start + insertText.length
+      pendingCursorRef.current = nextCursor
+      onChange(newValue)
+      // Restore cursor after React re-renders
+      if (ta) {
+        requestAnimationFrame(() => {
+          const el = document.getElementById(textareaId) as HTMLTextAreaElement | null
+          if (el && pendingCursorRef.current !== null) {
+            el.focus()
+            el.setSelectionRange(pendingCursorRef.current, pendingCursorRef.current)
+            pendingCursorRef.current = null
+          }
+        })
+      } else {
+        pendingCursorRef.current = null
+      }
+    },
+    [textareaId, currentContent, onChange]
+  )
+
+  return insertAt
+}
--- a/frontend/src/lib/nunjucksAutocomplete.ts
+++ b/frontend/src/lib/nunjucksAutocomplete.ts
@@ -1,98 +0,0 @@
-import { CompletionContext, CompletionResult } from '@codemirror/autocomplete'
-import type { EditorState } from '@codemirror/state'
-
-const NUNJUCKS_KEYWORDS = [
-    'if', 'endif', 'elif', 'else', 'for', 'endfor', 'in', 'and', 'or', 'not',
-    'true', 'false', 'none', 'macro', 'endmacro', 'set', 'endset', 'block', 'endblock',
-    'extends', 'include', 'import', 'with', 'endwith', 'filter', 'endfilter', 'raw', 'endraw',
-]
-
-const NUNJUCKS_FILTERS = [
-    'default', 'length', 'upper', 'lower', 'title', 'trim', 'join', 'replace',
-    'first', 'last', 'round', 'int', 'float', 'string', 'list', 'sort', 'groupby',
-    'trim', 'escape', 'safe', 'striptags', 'capitalize', 'reverse', 'batch', 'slice',
-]
-
-/** Get line text (CodeMirror 6: doc.line(n) is 1-based) */
-function getLineText(state: EditorState, lineNo0Based: number): string {
-    return state.doc.line(lineNo0Based + 1).text
-}
-
-/** Detect if position is inside {{ or {% from the start of the line */
-function insideNunjucks(state: EditorState, lineNo0Based: number, posInLine: number): boolean {
-    const line = getLineText(state, lineNo0Based)
-    const before = line.slice(0, posInLine)
-    const openVar = before.lastIndexOf('{{')
-    const openTag = before.lastIndexOf('{%')
-    const closeVar = before.lastIndexOf('}}')
-    const closeTag = before.lastIndexOf('%}')
-    if (openVar > -1 && (closeVar === -1 || closeVar < openVar)) return true
-    if (openTag > -1 && (closeTag === -1 || closeTag < openTag)) return true
-    return false
-}
-
-/** Get the word fragment before the cursor for matching */
-function wordBefore(state: EditorState, lineNo0Based: number, posInLine: number): string {
-    const line = getLineText(state, lineNo0Based)
-    let start = posInLine
-    while (start > 0 && /[\w.-]/.test(line[start - 1])) start -= 1
-    return line.slice(start, posInLine)
-}
-
-export function nunjucksCompletionSource(
-    variableIds: string[],
-    configTitles?: string[],
-    functionIds?: string[],
-    dataIds?: string[],
-): (context: CompletionContext) => CompletionResult | null {
-    return (context: CompletionContext) => {
-        const { state, pos } = context
-        const line = state.doc.lineAt(pos)
-        if (!insideNunjucks(state, line.number - 1, pos - line.from)) return null
-
-        const word = wordBefore(state, line.number - 1, pos - line.from)
-        const from = pos - word.length
-
-        const options: { label: string; type?: string; info?: string }[] = []
-
-        for (const id of variableIds) {
-            if (!word || id.toLowerCase().startsWith(word.toLowerCase())) {
-                options.push({ label: id, type: 'variable', info: 'Variable' })
-            }
-        }
-        for (const id of functionIds ?? []) {
-            if (!word || id.toLowerCase().startsWith(word.toLowerCase())) {
-                options.push({ label: id, type: 'function', info: "Filter: {{ '' | " + id + " }}" })
-            }
-        }
-        for (const kw of NUNJUCKS_KEYWORDS) {
-            if (!word || kw.startsWith(word.toLowerCase())) {
-                options.push({ label: kw, type: 'keyword', info: 'Nunjucks keyword' })
-            }
-        }
-        for (const f of NUNJUCKS_FILTERS) {
-            if (!word || f.startsWith(word.toLowerCase())) {
-                options.push({ label: `${f}`, type: 'function', info: `Filter: ${f}` })
-            }
-        }
-        if (configTitles?.length) {
-            for (const t of configTitles) {
-                if (!word || t.toLowerCase().startsWith(word.toLowerCase())) {
-                    options.push({ label: t, type: 'variable', info: 'Config' })
-                }
-            }
-        }
-        for (const dataId of dataIds ?? []) {
-            if (!word || dataId.toLowerCase().startsWith(word.toLowerCase())) {
-                options.push({ label: dataId, type: 'variable', info: 'Data (array of rows)' })
-            }
-        }
-
-        if (options.length === 0) return null
-        return {
-            from,
-            options: options.slice(0, 50),
-            validFor: /^[\w.-]*$/,
-        }
-    }
-}
--- a/frontend/src/lib/nunjucksTokenizer.ts
+++ b/frontend/src/lib/nunjucksTokenizer.ts
@@ -0,0 +1,109 @@
+/**
+ * Nunjucks-aware tokenizer: splits content by {{ }}, {% %}, {# #} and highlights
+ * code parts with Prism and nunjucks parts with fixed token types.
+ * Used so the code editor always supports Nunjucks templating syntax.
+ */
+import Prism from 'prismjs'
+import type { Grammar } from 'prismjs'
+
+export type Token = { types: string[]; content: string }
+
+/** Single-line nunjucks patterns (variable {{ }}, tag {% %}, comment {# #}) */
+const NUNJUCKS_VAR = /\{\{[^}]*\}\}/g
+const NUNJUCKS_TAG = /\{\%[^%]*\%\}/g
+const NUNJUCKS_COMMENT = /\{\#[^#]*\#\}/g
+
+/** Combined: match the first nunjucks block on a line (variable, tag, or comment) */
+const NUNJUCKS_PATTERN = /\{\{[^}]*\}\}|\{\%[^%]*\%\}|\{\#[^#]*\#\}/g
+
+/** Nunjucks-specific token types so we can style them differently from the main language. */
+const TOKEN_VARIABLE = ['nunjucks-var']
+const TOKEN_TAG = ['nunjucks-tag']
+const TOKEN_COMMENT = ['nunjucks-comment']
+
+function prismTokenToTypes(t: string | Prism.Token): string[] {
+  if (typeof t === 'string') return ['plain']
+  const type = t.type
+  const types = Array.isArray(type) ? type : [type]
+  const alias = (t as Prism.Token & { alias?: string | string[] }).alias
+  if (alias) {
+    const a = Array.isArray(alias) ? alias : [alias]
+    return [...types, ...a]
+  }
+  return types
+}
+
+function flattenPrismTokens(
+  tokens: (string | Prism.Token)[],
+  acc: Token[] = []
+): Token[] {
+  for (const t of tokens) {
+    if (typeof t === 'string') {
+      acc.push({ types: ['plain'], content: t })
+    } else {
+      const types = prismTokenToTypes(t)
+      const content = t.content
+      if (typeof content === 'string') {
+        acc.push({ types, content })
+      } else {
+        flattenPrismTokens(content as (string | Prism.Token)[], acc)
+      }
+    }
+  }
+  return acc
+}
+
+/**
+ * Split a line into segments: alternating code and nunjucks (variable/tag/comment).
+ * Each nunjucks segment is one match; code segments are tokenized with Prism.
+ */
+function tokenizeLine(
+  line: string,
+  grammar: Grammar
+): Token[] {
+  const result: Token[] = []
+  let lastIndex = 0
+  const re = new RegExp(NUNJUCKS_PATTERN.source, 'g')
+  let m: RegExpExecArray | null
+  while ((m = re.exec(line)) !== null) {
+    const codeSegment = line.slice(lastIndex, m.index)
+    if (codeSegment.length > 0) {
+      try {
+        const prismTokens = Prism.tokenize(codeSegment, grammar)
+        result.push(...flattenPrismTokens(prismTokens))
+      } catch {
+        result.push({ types: ['plain'], content: codeSegment })
+      }
+    }
+    const nunjucksContent = m[0]
+    if (nunjucksContent.startsWith('{{')) {
+      result.push({ types: TOKEN_VARIABLE, content: nunjucksContent })
+    } else if (nunjucksContent.startsWith('{%')) {
+      result.push({ types: TOKEN_TAG, content: nunjucksContent })
+    } else {
+      result.push({ types: TOKEN_COMMENT, content: nunjucksContent })
+    }
+    lastIndex = re.lastIndex
+  }
+  const tail = line.slice(lastIndex)
+  if (tail.length > 0) {
+    try {
+      const prismTokens = Prism.tokenize(tail, grammar)
+      result.push(...flattenPrismTokens(prismTokens))
+    } catch {
+      result.push({ types: ['plain'], content: tail })
+    }
+  }
+  return result
+}
+
+/**
+ * Tokenize code with Nunjucks support. Returns lines of tokens (same shape as prism-react-renderer).
+ */
+export function tokenizeWithNunjucks(
+  code: string,
+  grammar: Grammar
+): Token[][] {
+  const lines = code.split('\n')
+  return lines.map((line) => tokenizeLine(line, grammar))
+}
--- a/frontend/src/lib/plantumlLanguage.ts
+++ b/frontend/src/lib/plantumlLanguage.ts
@@ -1,79 +0,0 @@
-import { StreamLanguage } from '@codemirror/language'
-
-/** Nunjucks block comment {# ... #} */
-function tokenNunjucksComment(stream: { match: (re: RegExp) => unknown; next: () => string | void; eol: () => boolean }) {
-    if (stream.match(/^\{#/)) {
-        while (!stream.eol()) {
-            if (stream.match(/#\}/)) return 'comment'
-            stream.next()
-        }
-        return 'comment'
-    }
-    return null
-}
-
-/** Nunjucks variable {{ ... }} or tag {% ... %} - tokenize the whole block */
-function tokenNunjucksBlock(stream: { match: (re: RegExp) => unknown; next: () => string | void; eol: () => boolean }) {
-    if (stream.match(/^\{\{/)) {
-        while (!stream.eol()) {
-            if (stream.match(/\}\}/)) return 'variableName.special'
-            stream.next()
-        }
-        return 'variableName.special'
-    }
-    if (stream.match(/^\{\%/)) {
-        while (!stream.eol()) {
-            if (stream.match(/%\}/)) return 'keyword'
-            stream.next()
-        }
-        return 'keyword'
-    }
-    return null
-}
-
-/** Simple PlantUML + Nunjucks stream parser for syntax highlighting in CodeMirror */
-const plantumlParser = StreamLanguage.define({
-    name: 'plantuml',
-    token(stream) {
-        // Nunjucks {# ... #} comment
-        const nunjucksComment = tokenNunjucksComment(stream)
-        if (nunjucksComment) return nunjucksComment
-        // Nunjucks {{ }} and {% %}
-        const nunjucksBlock = tokenNunjucksBlock(stream)
-        if (nunjucksBlock) return nunjucksBlock
-
-        // Single-quote line comment (PlantUML)
-        if (stream.match(/^'/)) {
-            stream.skipToEnd()
-            return 'comment'
-        }
-        // Double-quoted string
-        if (stream.match(/^"/)) {
-            let escaped = false
-            while (!stream.eol()) {
-                if (escaped) {
-                    escaped = false
-                    stream.next()
-                    continue
-                }
-                const ch = stream.next()
-                if (ch === '\\') escaped = true
-                else if (ch === '"') break
-            }
-            return 'string'
-        }
-        // @directives (@startuml, @enduml, etc.)
-        if (stream.match(/^@\w+/)) return 'meta'
-        // Skip whitespace
-        if (stream.eatSpace()) return null
-        // Arrows and connectors
-        if (stream.match(/^->>?|<-<?|-->>?|<<--?|<-?>/)) return 'keyword'
-        // Keywords (participant, actor, as, title, etc.)
-        if (stream.match(/^(participant|actor|as|title|autonumber|left|right|of|over|activate|deactivate|destroy|create|group|opt|alt|else|loop|par|end|note|legend|skinparam|start|stop|if|endif|elseif|while|endwhile|repeat|until|switch|case|endswitch|class|interface|enum|package|namespace|abstract|static|extends|implements)\b/i)) return 'keyword'
-        // Any other character (identifier, punctuation, etc.)
-        stream.next()
-        return null
-    },
-})
-
-export const plantumlLanguage = plantumlParser
--- a/frontend/src/lib/prismSetup.ts
+++ b/frontend/src/lib/prismSetup.ts
@@ -0,0 +1,7 @@
+/**
+ * Load Prism and register extra languages. Import this once before any syntax highlighting (e.g. in main.tsx).
+ * setPrismGlobal must run first so component IIFEs see Prism on global.
+ */
+import './setPrismGlobal'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-plant-uml'
--- a/frontend/src/lib/setPrismGlobal.ts
+++ b/frontend/src/lib/setPrismGlobal.ts
@@ -0,0 +1,4 @@
+/** Run first so Prism is on global when language components load. */
+import Prism from 'prismjs'
+;(globalThis as Record<string, unknown>).Prism = Prism
+export {}
--- a/frontend/src/lib/syntaxHighlight.tsx
+++ b/frontend/src/lib/syntaxHighlight.tsx
@@ -0,0 +1,55 @@
+/**
+ * Syntax highlighting for the code editor: Prism + prism-react-renderer + Nunjucks.
+ * Nunjucks ({{ }}, {% %}, {# #}) is always applied so the editor supports templating everywhere.
+ * Ensure prismSetup.ts is imported once in main.tsx, and prism theme: import 'prismjs/themes/prism.css'
+ */
+import React from 'react'
+import Prism from 'prismjs'
+import type { Grammar } from 'prismjs'
+import { tokenizeWithNunjucks } from '@/lib/nunjucksTokenizer'
+
+export type HighlightLanguage = 'javascript' | 'markdown' | 'plantuml'
+
+const prismLang: Record<HighlightLanguage, string> = {
+  javascript: 'javascript',
+  markdown: 'markdown',
+  plantuml: 'plantuml',
+}
+
+function getGrammar(language: HighlightLanguage): Grammar {
+  const lang = prismLang[language]
+  const g = (Prism.languages as Record<string, Grammar>)[lang]
+  return g ?? {}
+}
+
+/**
+ * Returns highlighted code as React nodes with Nunjucks support.
+ * Used by the shared CodeEditor so all usages get the same features (base language + Nunjucks).
+ */
+export function highlight(
+  code: string,
+  language: HighlightLanguage
+): React.ReactNode {
+  const grammar = getGrammar(language)
+  const lines = tokenizeWithNunjucks(code, grammar)
+  return (
+    <>
+      {lines.map((lineTokens, i) => (
+        <div key={i} className="token-line">
+          {lineTokens.length > 0 ? (
+            lineTokens.map((token, j) => (
+              <span
+                key={j}
+                className={`token ${token.types.join(' ')}`}
+              >
+                {token.content}
+              </span>
+            ))
+          ) : (
+            <span className="token">&#8203;</span>
+          )}
+        </div>
+      ))}
+    </>
+  )
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -9,6 +9,8 @@ import { KosmosPage } from './app/kosmos/KosmosPage'
 import { ProjectsPage } from './app/pleroma/PleromaPage'
 import { KeromaPage } from './app/keroma/KeromaPage'
 import { CanvasRoute } from './app/canvas/CanvasRoute'
+import './lib/prismSetup'
+import 'prismjs/themes/prism.css'
 import './styles.css'
 import '@xyflow/react/dist/style.css'

--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -366,4 +366,31 @@ pre {
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
+}
+
+/* Nunjucks tokens in code editor: distinct from main language (Prism) */
+.token.nunjucks-var {
+    color: #7c3aed;
+}
+.token.nunjucks-tag {
+    color: #c2410c;
+}
+.token.nunjucks-comment {
+    color: #0d9488;
+}
+.dark .token.nunjucks-var {
+    color: #a78bfa;
+}
+.dark .token.nunjucks-tag {
+    color: #fb923c;
+}
+.dark .token.nunjucks-comment {
+    color: #2dd4bf;
+}
+
+/* Prism default theme adds a background to .token.operator (e.g. "="); remove it in our code editor */
+.code-editor .token.operator,
+.code-editor .token.entity,
+.code-editor .token.url {
+    background: none;
 }