diff --git a/packages/sn-controls-react/src/fieldcontrols/html-editor.tsx b/packages/sn-controls-react/src/fieldcontrols/html-editor.tsx
index ba3a96a60..82b164953 100644
--- a/packages/sn-controls-react/src/fieldcontrols/html-editor.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/html-editor.tsx
@@ -14,11 +14,12 @@ import { ReactClientFieldSetting } from './client-field-setting'
 export const HtmlEditor: React.FC<
   ReactClientFieldSetting & {
     theme?: Theme
+    setValue?: (value: string) => void
   }
 > = (props) => {
   const initialState =
     props.fieldValue || (props.actionName === 'new' && changeTemplatedValue(props.settings.DefaultValue)) || ''
-  const [value, setValue] = useState(initialState)
+  props.setValue?.(initialState)
 
   const editorRef = useRef<MonacoEditor>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -35,6 +36,10 @@ export const HtmlEditor: React.FC<
   }, [editorRef])
   const readonly = props.actionName === 'browse' || props.settings.ReadOnly
 
+  const editorChangeHandler = (newValue: string) => {
+    props.fieldOnChange?.(props.settings.Name, newValue)
+  }
+
   return (
     <>
       <InputLabel shrink>{props.settings.DisplayName}</InputLabel>
@@ -45,11 +50,8 @@ export const HtmlEditor: React.FC<
           {...props}
           width="100%"
           height="100%"
-          value={value}
-          onChange={(v) => {
-            setValue(v)
-            props.fieldOnChange?.(props.settings.Name, v)
-          }}
+          value={props.fieldValue}
+          onChange={editorChangeHandler}
           options={{
             automaticLayout: true,
             contextmenu: true,
diff --git a/packages/sn-controls-react/test/html-editor.test.tsx b/packages/sn-controls-react/test/html-editor.test.tsx
index affe2fb01..29a682084 100644
--- a/packages/sn-controls-react/test/html-editor.test.tsx
+++ b/packages/sn-controls-react/test/html-editor.test.tsx
@@ -7,7 +7,7 @@ import { defaultLocalization, HtmlEditor } from '../src/fieldcontrols'
 jest.mock('react-monaco-editor', () =>
   jest.fn((props) => {
     return (
-      <div data-test="mock-monaco-editor" onChange={props.onChange}>
+      <div data-test="mock-monaco-editor" onChange={props.fieldOnChange}>
         {props.value}
       </div>
     )
@@ -32,7 +32,7 @@ describe('Html Editor', () => {
       localization: defaultLocalization,
       fieldValue: '<p>Test</p>',
 
-      onChange,
+      fieldOnChange: onChange,
     }
 
     const wrapper = mount(<HtmlEditor {...props} />)
@@ -49,6 +49,8 @@ describe('Html Editor', () => {
       mockMonacoEditor.prop('onChange')?.('<p>Changed Test</p>' as any)
     })
 
-    expect(htmlEditorContainer.text()).toBe('<p>Changed Test</p>')
+    //should be called with onChange
+
+    expect(props.fieldOnChange).toBeCalledWith('<p>Changed Test</p>')
   })
 })