Fix an issue where the template data input didn't reset properly

Signed-off-by: Axel Boberg <[email protected]>

plugins/caspar/app/components/Monaco/index.jsx

@@ -20,7 +20,7 @@ const CUSTOM_LANGUAGE_NAME = 'bridgeLang'
  * 
  * @see https://microsoft.github.io/monaco-editor/typedoc/index.html
  */
-export const Monaco = ({ defaultValue = '', value = '', onChange = () => {} }) => {
+export const Monaco = ({ defaultValue = '', value = '', reset, onChange = () => {} }) => {
   const elRef = React.useRef()
   const modelRef = React.useRef()
 
@@ -158,10 +158,11 @@ export const Monaco = ({ defaultValue = '', value = '', onChange = () => {} }) =
       return
     }
     if (value == null) {
+      modelRef.current.setValue(defaultValue)
       return
     }
     modelRef.current.setValue(value)
-  }, [value])
+  }, [value, defaultValue, reset])
 
   return (
     <div ref={elRef} className='Monaco' />

plugins/caspar/app/views/InspectorTemplate.jsx

@@ -9,6 +9,7 @@ export const InspectorTemplate = () => {
   const [state] = React.useContext(SharedContext)
   const [selection, setSelection] = React.useState([])
 
+  const [id, setId] = React.useState()
   const [value, setValue] = React.useState()
 
   const selectionRef = React.useRef([])
@@ -29,6 +30,7 @@ export const InspectorTemplate = () => {
   React.useEffect(() => {
     const items = selection.map(id => state?.items?.[id])
     const value = items?.[0]?.data?.caspar?.templateDataString
+    setId(items?.[0]?.id)
     setValue(value)
   }, [JSON.stringify(selection)])
 
@@ -59,7 +61,9 @@ export const InspectorTemplate = () => {
   return (
     <div className='View--spread'>
       <Monaco
+        reset={id}
         value={value ?? ['{', '', '}'].join('\n')}
+        defaultValue={['{', '', '}'].join('\n')}
         onChange={newValue => handleChange(newValue)}
       />
     </div>