switch to plantuml

This commit is contained in:
2026-03-07 00:13:14 +01:00
parent b7aa1079d4
commit cb89557998
6 changed files with 250 additions and 116 deletions

View File

@@ -1,7 +1,7 @@
import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { yaml } from '@codemirror/lang-yaml'
import FlowContext from '../../lib/flowContext'
import { plantumlLanguage } from '../../lib/plantumlLanguage'
import { useTheme } from '../../lib/themeContext'
import {
BaseNode,
@@ -29,11 +29,11 @@ type Props = {
}
export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
const [value, setValue] = useState<string>(data?.yaml ?? '# Enter YAML here\n')
const [value, setValue] = useState<string>(data?.plantuml ?? '@startuml\n\n@enduml\n')
const { theme } = useTheme()
const ctx = useContext(FlowContext)
const setNodes = ctx?.setNodes
const storedYaml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.yaml ?? ''
const storedPlantuml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.plantuml ?? ''
const editorRef = useRef<unknown>(null)
@@ -46,7 +46,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
useEffect(() => {
if (setNodes) {
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: value } } : n)))
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: value } } : n)))
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
@@ -55,7 +55,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
(val: string) => {
setValue(val)
if (setNodes) {
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: val } } : n)))
setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: val } } : n)))
}
},
[id, setNodes]
@@ -93,7 +93,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
const insertIncludeFromNode = useCallback(
(sourceNode: any, mode: 'prepend' | 'append' | 'cursor') => {
const ref = `${sourceNode.id}.yaml`
const ref = `${sourceNode.id}.puml`
insertAt(`!include ${ref}\n`, mode)
},
[insertAt]
@@ -113,13 +113,13 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
[insertAt]
)
const extensions = useMemo(() => [yaml()], [])
const extensions = useMemo(() => [plantumlLanguage.extension], [])
return (
<BaseNode className="w-80">
<BaseNodeHeader className="border-b">
<ScrollText className="size-4" />
<BaseNodeHeaderTitle>{id}.yml</BaseNodeHeaderTitle>
<BaseNodeHeaderTitle>{id}.puml</BaseNodeHeaderTitle>
</BaseNodeHeader>
<BaseNodeContent>
@@ -210,7 +210,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
</BaseNodeContent>
<BaseNodeFooter>
<div className="w-full text-xs text-muted-foreground">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
<div className="w-full text-xs text-muted-foreground">{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</div>
</BaseNodeFooter>
<InputHandle id="ain" />