Add standalone PlantUML preview support

Author: beNative

FUNCTIONAL_MANUAL.md

@@ -150,6 +150,8 @@ The **General** settings category includes a **PlantUML Rendering** selector. Ch
 
 If the Java runtime is unavailable, DocForge will report the error in the preview and you can switch back to remote rendering at any time.
 
+The chosen rendering mode is used for PlantUML code blocks inside Markdown documents *and* for standalone `.puml` documents rendered through the dedicated PlantUML previewer.
+
 ### Logger Panel
 
 Accessed via the terminal icon in the title bar, this panel is your primary tool for debugging and monitoring application activity.

TECHNICAL_MANUAL.md

@@ -94,8 +94,8 @@ This system provides a consistent and extensible editing experience for all docu
 -   **`CodeEditor.tsx`:** A React component that wraps and configures the Monaco Editor instance. It's responsible for managing the editor's content, theme, and language for syntax highlighting based on props.
 -   **`PreviewPane.tsx`:** This component is responsible for displaying the rendered output of a document. It debounces content updates for performance and uses the `PreviewService` to get the correct output.
 -   **`services/previewService.ts`:** This service acts as a registry for all available renderer "plugins." It exposes a method, `getRendererForLanguage()`, which finds and returns the appropriate renderer for a given language ID (e.g., 'markdown').
--   **Renderer Plugins (`services/preview/`):** Each file format with a preview is supported by a dedicated renderer class that implements the `IRenderer` interface. This makes the system highly extensible: to support a new format, one only needs to create a new renderer class and add it to the `previewService` registry. Currently, renderers for Markdown, HTML, and plaintext (fallback) are implemented.
-    -   The Markdown renderer now integrates an offline PlantUML path. When users select the offline mode, the renderer invokes the main-process `node-plantuml` bridge to generate SVG output locally; otherwise it falls back to the remote plantuml.com service.
+-   **Renderer Plugins (`services/preview/`):** Each file format with a preview is supported by a dedicated renderer class that implements the `IRenderer` interface. This makes the system highly extensible: to support a new format, one only needs to create a new renderer class and add it to the `previewService` registry. The bundled plugins cover Markdown (with Mermaid + PlantUML support), standalone PlantUML documents, HTML, PDFs, common image formats, and a plaintext fallback renderer.
+    -   Both the Markdown renderer and the standalone PlantUML renderer share the `PlantUMLDiagram` component, which routes diagrams through either the remote plantuml.com server or the offline `node-plantuml` IPC bridge depending on the active setting.
 
 ### LLM Service (`services/llmService.ts`)
 

components/PromptEditor.tsx

@@ -29,6 +29,9 @@ interface DocumentEditorProps {
 const PREVIEWABLE_LANGUAGES = new Set<string>([
   'markdown',
   'html',
+  'plantuml',
+  'puml',
+  'uml',
   'pdf',
   'application/pdf',
   'image',
@@ -62,6 +65,9 @@ const resolveDefaultViewMode = (mode: ViewMode | null | undefined, languageHint:
   if (normalizedHint === 'image' || normalizedHint.startsWith('image/')) {
     return 'preview';
   }
+  if (normalizedHint === 'plantuml' || normalizedHint === 'puml' || normalizedHint === 'uml') {
+    return 'preview';
+  }
   return 'edit';
 };
 

docs/FUNCTIONAL_MANUAL.md

@@ -150,6 +150,8 @@ The **General** settings category includes a **PlantUML Rendering** selector. Ch
 
 If the Java runtime is unavailable, DocForge will report the error in the preview and you can switch back to remote rendering at any time.
 
+The chosen rendering mode is used for PlantUML code blocks inside Markdown documents *and* for standalone `.puml` documents rendered through the dedicated PlantUML previewer.
+
 ### Logger Panel
 
 Accessed via the terminal icon in the title bar, this panel is your primary tool for debugging and monitoring application activity.

docs/TECHNICAL_MANUAL.md

@@ -94,8 +94,8 @@ This system provides a consistent and extensible editing experience for all docu
 -   **`CodeEditor.tsx`:** A React component that wraps and configures the Monaco Editor instance. It's responsible for managing the editor's content, theme, and language for syntax highlighting based on props.
 -   **`PreviewPane.tsx`:** This component is responsible for displaying the rendered output of a document. It debounces content updates for performance and uses the `PreviewService` to get the correct output.
 -   **`services/previewService.ts`:** This service acts as a registry for all available renderer "plugins." It exposes a method, `getRendererForLanguage()`, which finds and returns the appropriate renderer for a given language ID (e.g., 'markdown').
--   **Renderer Plugins (`services/preview/`):** Each file format with a preview is supported by a dedicated renderer class that implements the `IRenderer` interface. This makes the system highly extensible: to support a new format, one only needs to create a new renderer class and add it to the `previewService` registry. Currently, renderers for Markdown, HTML, and plaintext (fallback) are implemented.
-    -   The Markdown renderer now integrates an offline PlantUML path. When users select the offline mode, the renderer invokes the main-process `node-plantuml` bridge to generate SVG output locally; otherwise it falls back to the remote plantuml.com service.
+-   **Renderer Plugins (`services/preview/`):** Each file format with a preview is supported by a dedicated renderer class that implements the `IRenderer` interface. This makes the system highly extensible: to support a new format, one only needs to create a new renderer class and add it to the `previewService` registry. The bundled plugins cover Markdown (with Mermaid + PlantUML support), standalone PlantUML documents, HTML, PDFs, common image formats, and a plaintext fallback renderer.
+    -   Both the Markdown renderer and the standalone PlantUML renderer share the `PlantUMLDiagram` component, which routes diagrams through either the remote plantuml.com server or the offline `node-plantuml` IPC bridge depending on the active setting.
 
 ### LLM Service (`services/llmService.ts`)
 

esbuild.config.js

@@ -34,7 +34,7 @@ const buildOrWatch = async (name, config) => {
         platform: 'node',
         entryPoints: ['electron/main.ts'],
         outfile: 'dist/main.js',
-        external: ['electron', 'better-sqlite3'],
+        external: ['electron', 'better-sqlite3', 'node-plantuml'],
       }),
       buildOrWatch('preload', {
         ...sharedConfig,

services/languageService.ts

@@ -9,6 +9,7 @@ export const SUPPORTED_LANGUAGES = [
     { id: 'css', label: 'CSS' },
     { id: 'json', label: 'JSON' },
     { id: 'markdown', label: 'Markdown' },
+    { id: 'plantuml', label: 'PlantUML' },
     { id: 'java', label: 'Java' },
     { id: 'csharp', label: 'C#' },
     { id: 'cpp', label: 'C++' },
@@ -46,6 +47,9 @@ export const mapExtensionToLanguageId = (extension: string | null): string => {
         case 'md':
         case 'markdown':
             return 'markdown';
+        case 'puml':
+        case 'plantuml':
+            return 'plantuml';
         case 'java':
             return 'java';
         case 'cs':

services/preview/markdownRenderer.tsx

@@ -8,12 +8,12 @@ import rehypeKatex from 'rehype-katex';
 import type { Components } from 'react-markdown';
 import type { Highlighter } from 'shiki';
 import mermaid from 'mermaid';
-import plantumlEncoder from 'plantuml-encoder';
 import type { IRenderer } from './IRenderer';
 import type { LogLevel, Settings } from '../../types';
 import { DEFAULT_SETTINGS } from '../../constants';
 import { useTheme } from '../../hooks/useTheme';
 import { getSharedHighlighter } from './shikiHighlighter';
+import { PlantUMLDiagram, PLANTUML_LANGS } from './plantumlDiagram';
 
 import 'katex/dist/katex.min.css';
 
@@ -101,195 +101,6 @@ const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ code, theme }) => {
   );
 };
 
-interface PlantUMLDiagramProps {
-  code: string;
-  mode: Settings['plantumlRendererMode'];
-}
-
-const PLANTUML_LANGS = ['plantuml', 'puml', 'uml'];
-const PLANTUML_SERVER = 'https://www.plantuml.com/plantuml/svg';
-
-interface PlantUMLErrorProps {
-  message: string;
-  details?: string | null;
-}
-
-const PlantUMLError: React.FC<PlantUMLErrorProps> = ({ message, details }) => (
-  <div className="df-plantuml" role="alert">
-    <div className="df-plantuml-error">
-      <div className="df-plantuml-error__message">{message}</div>
-      {details && details.trim() && (
-        <details className="df-plantuml-error__details">
-          <summary>Technical details</summary>
-          <code>{details}</code>
-        </details>
-      )}
-    </div>
-  </div>
-);
-
-const PlantUMLRemoteDiagram: React.FC<{ code: string }> = ({ code }) => {
-  const { encoded, reason, error } = useMemo(() => {
-    const trimmed = code.trim();
-    if (!trimmed) {
-      return { encoded: null, reason: 'empty' as const, error: 'The PlantUML code block is empty.' };
-    }
-    try {
-      return { encoded: plantumlEncoder.encode(trimmed), reason: 'ok' as const, error: null };
-    } catch (err) {
-      return {
-        encoded: null,
-        reason: 'encode-error' as const,
-        error: err instanceof Error ? err.message : String(err),
-      };
-    }
-  }, [code]);
-
-  const [hasError, setHasError] = useState(false);
-  const [errorDetails, setErrorDetails] = useState<string | null>(error);
-
-  useEffect(() => {
-    setHasError(false);
-    setErrorDetails(error);
-  }, [error, encoded, code]);
-
-  if (!encoded) {
-    const message =
-      reason === 'empty'
-        ? 'PlantUML diagram is empty.'
-        : 'Unable to encode PlantUML diagram.';
-    return <PlantUMLError message={message} details={errorDetails} />;
-  }
-
-  if (hasError) {
-    return (
-      <PlantUMLError
-        message="Failed to load PlantUML diagram from remote server."
-        details={errorDetails ?? `Request URL: ${PLANTUML_SERVER}/${encoded}`}
-      />
-    );
-  }
-
-  return (
-    <div className="df-plantuml">
-      <img
-        src={`${PLANTUML_SERVER}/${encoded}`}
-        alt="PlantUML diagram"
-        loading="lazy"
-        onError={() => {
-          setHasError(true);
-          setErrorDetails(`Request URL: ${PLANTUML_SERVER}/${encoded}`);
-        }}
-      />
-    </div>
-  );
-};
-
-interface OfflineRenderState {
-  status: 'idle' | 'loading' | 'success' | 'error';
-  svg?: string;
-  error?: string;
-  details?: string | null;
-}
-
-const PlantUMLOfflineDiagram: React.FC<{ code: string }> = ({ code }) => {
-  const [state, setState] = useState<OfflineRenderState>({ status: 'idle' });
-
-  useEffect(() => {
-    let cancelled = false;
-    const trimmed = code.trim();
-
-    if (!trimmed) {
-      setState({ status: 'error', error: 'PlantUML diagram is empty.', details: null });
-      return () => {
-        cancelled = true;
-      };
-    }
-
-    if (typeof window === 'undefined' || !window.electronAPI?.renderPlantUML) {
-      setState({
-        status: 'error',
-        error: 'Local PlantUML renderer is not available in this environment.',
-        details: 'Switch to remote rendering or run the desktop app with a Java runtime installed.',
-      });
-      return () => {
-        cancelled = true;
-      };
-    }
-
-    setState({ status: 'loading' });
-
-    window.electronAPI
-      .renderPlantUML(trimmed, 'svg')
-      .then((result) => {
-        if (cancelled) {
-          return;
-        }
-        if (result?.success && result.svg) {
-          setState({ status: 'success', svg: result.svg });
-        } else {
-          setState({
-            status: 'error',
-            error: result?.error || 'The local PlantUML renderer returned no output.',
-            details: result?.details ?? null,
-          });
-        }
-      })
-      .catch((err) => {
-        if (cancelled) {
-          return;
-        }
-        const details = err instanceof Error ? err.message : String(err);
-        setState({
-          status: 'error',
-          error: 'Unable to render PlantUML diagram locally.',
-          details,
-        });
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [code]);
-
-  if (state.status === 'loading' || state.status === 'idle') {
-    return (
-      <div className="df-plantuml">
-        <div className="df-plantuml-loading">Rendering diagram locally...</div>
-      </div>
-    );
-  }
-
-  if (state.status === 'error') {
-    return <PlantUMLError message={state.error ?? 'Unable to render PlantUML diagram locally.'} details={state.details} />;
-  }
-
-  if (state.status === 'success' && state.svg) {
-    return (
-      <div
-        className="df-plantuml"
-        role="img"
-        aria-label="PlantUML diagram"
-        dangerouslySetInnerHTML={{ __html: state.svg }}
-      />
-    );
-  }
-
-  return (
-    <PlantUMLError
-      message="Local PlantUML renderer did not return any SVG output."
-      details={state.details}
-    />
-  );
-};
-
-const PlantUMLDiagram: React.FC<PlantUMLDiagramProps> = ({ code, mode }) => {
-  if (mode === 'offline') {
-    return <PlantUMLOfflineDiagram code={code} />;
-  }
-  return <PlantUMLRemoteDiagram code={code} />;
-};
-
 const MarkdownViewer = forwardRef<HTMLDivElement, MarkdownViewerProps>(({ content, settings, onScroll }, ref) => {
   const { theme } = useTheme();
   const viewTheme: 'light' | 'dark' = theme === 'dark' ? 'dark' : 'light';