graph TD
    A[User Data Value] --> B[Field Formatter]
    B --> C{Content Type?}
    
    C -->|text| D[textConvert]
    C -->|html| E[htmlConvert]
    
    D --> F[Plain Text String]
    E --> G[HTML String with Tags]
    
    G --> H[Consumer Component]
    H --> I["dangerouslySetInnerHTML ⚠️"]
    I --> J[DOM Rendering]
    
    F --> K[Consumer Component]
    K --> L[Safe Text Rendering]
    
    classDef risk fill:#ffcccc,stroke:#ff0000,stroke-width:2px,color:#000000
    classDef safe fill:#ccffcc,stroke:#00aa00,stroke-width:2px,color:#000000
    
    class G,I,J risk
    class F,L safe

graph TD
    A[User Data Value] --> B[Field Formatter]
    B --> C{Content Type?}
    
    C -->|text| D[textConvert]
    C -->|html| E[HTML Bridge]
    C -->|react| F[reactConvert]
    
    D --> G[Plain Text String]
    
    F --> H[React Elements]
    F --> I[checkForMissingValueReact]
    F --> J[getHighlightReact]
    
    I --> K[Styled Missing Value Spans]
    J --> L[Safe Mark Elements]
    
    E --> M[Bridge Logic]
    M --> N{React Output Type?}
    N -->|ReactElement| O[ReactDOM.renderToStaticMarkup]
    N -->|String/Number| P[HTML Escape]
    
    O --> Q[Safe HTML String]
    P --> Q
    
    H --> R[Consumer Component]
    R --> S[Direct React Rendering]
    S --> T[Safe DOM]
    
    Q --> U[Legacy Consumer]
    U --> V["dangerouslySetInnerHTML (Legacy)"]
    V --> W[DOM Rendering]
    
    classDef safe fill:#ccffcc,stroke:#00aa00,stroke-width:2px,color:#000000
    classDef bridge fill:#ccccff,stroke:#0066cc,stroke-width:2px,color:#000000
    classDef legacy fill:#ffffcc,stroke:#cc8800,stroke-width:2px,color:#000000
    
    class H,S,T,K,L safe
    class M,E,O,P,Q bridge
    class U,V,W legacy