How to reset content value of the custom component?

[Jaemoon_Lee]

Hi, there.

I have a question regarding custom component.
I made a HTML Editor and here's the code of it.

import React from 'react'
import { type FC } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { html } from '@codemirror/lang-html'

import { Retool } from '@tryretool/custom-component-support'

export const HTMLEditor: FC = () => {
  const [htmlCode, setHtmlCode] = Retool.useStateString({
    name: 'htmlCode'
  })

  const handleCodeChange = (value: string) => {
    setHtmlCode(value)
  }

  const containerStyle: React.CSSProperties = {
    backgroundColor: '#fff'
  }

  const editorWrapperStyle: React.CSSProperties = {
    border: '1px solid #ddd',
    borderRadius: '4px',
    overflow: 'hidden'
  }

  return (
    <div style={containerStyle}>
      <div style={editorWrapperStyle}>
        <CodeMirror
          value={htmlCode}
          onChange={handleCodeChange}
          extensions={[html()]}
          theme="light"
          basicSetup={{
            lineNumbers: true,
            foldGutter: true,
            dropCursor: false,
            allowMultipleSelections: false,
            indentOnInput: true,
            bracketMatching: true,
            closeBrackets: true,
            autocompletion: true,
            highlightSelectionMatches: true,
            searchKeymap: true
          }}
          style={{
            fontSize: '14px',
            fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace'
          }}
          width="100vw"
          height="600px"
        />
      </div>
    </div>
  )
}

There is a drawerFrame in my app and when I hide this drawerFrame, I want to reset value of the HTML Editor which is written in the "htmlCode".
However, I couldn't find a Reset Value action like the screenshot below.

Does anyone know how to achieve this?

Thanks!

[WidleStudioLLP]

Hi @Jaemoon_Lee,

You can reset the Custom HTML Editor using a variable. Simply create a variable and reference it in the htmlCode field of the htmlEditor component. Then, use the drawer's close button to trigger an event that resets the variable, as shown in the screenshot.

---

---

[Jaemoon_Lee]

Thanks for your help!! I really appreciate it.