fix: properly handle states for processed_text elements

src/Webform.tsx

@@ -3,7 +3,15 @@ import axios from 'axios'
 import { graphql } from 'gatsby'
 
 import { getAttributeValue, formToJSON } from './utils'
-import { WebformDebug, WebformInput, WebformSelect, WebformTextarea, WebformCheckbox, WebformCheckboxGroup } from './components'
+import {
+	WebformDebug,
+	WebformInput,
+	WebformSelect,
+	WebformTextarea,
+	WebformCheckbox,
+	WebformCheckboxGroup,
+	WebformText
+} from './components'
 
 export const DEFAULT_SUBMIT_LABEL = 'Submit'
 
@@ -145,7 +153,7 @@ export function renderWebformElement(element: WebformElement, error?: string, Cu
 		case 'select':
 			return <WebformSelect element={element} {...customComponentAPI} />
 		case 'processed_text':
-			return <div dangerouslySetInnerHTML={{ __html: getAttributeValue('#text', element) || '' }} />
+			return <WebformText element={element} {...customComponentAPI} />
 		// Submit button
 		case 'webform_actions':
 			return (

src/components/WebformText.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { WebformCustomComponent } from '..'
+import { useWebformElement } from '../utils'
+
+import WebformElementWrapper from './WebformElementWrapper'
+
+export const WebformText: WebformCustomComponent = ({ element, error }) => {
+	const [, settings] = useWebformElement(element, {})
+
+	return (
+		<WebformElementWrapper settings={settings} error={error}>
+			<div dangerouslySetInnerHTML={{ __html: settings.attributes.text || '' }} />
+		</WebformElementWrapper>
+	)
+}
+
+export default WebformText

src/components/index.ts

@@ -4,6 +4,16 @@ import WebformTextarea from './WebformTextarea'
 import WebformCheckbox from './WebformCheckbox'
 import WebformCheckboxGroup from './WebformCheckboxGroup'
 import WebformElementWrapper from './WebformElementWrapper'
+import WebformText from './WebformText'
 import WebformDebug from './WebformDebug'
 
-export { WebformInput, WebformSelect, WebformTextarea, WebformCheckbox, WebformCheckboxGroup, WebformElementWrapper, WebformDebug }
+export {
+	WebformInput,
+	WebformSelect,
+	WebformTextarea,
+	WebformCheckbox,
+	WebformCheckboxGroup,
+	WebformElementWrapper,
+	WebformText,
+	WebformDebug
+}