Merge branch 'development' of https://github.com/Oneirocom/Magick int…

…o development

packages/client/editor/src/components/PropertiesWindow/PropertiesWindow.tsx

@@ -115,7 +115,7 @@ export const PropertiesWindow = (props: Props) => {
         )
 
         return (
-          <div className={borderClass}>
+          <div key={key + index} className={borderClass}>
             <Component {...componentProps} />
           </div>
         )

packages/client/editor/src/components/PropertiesWindow/SocketConfig.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from "react"
-import { ConfigurationComponentProps } from "./PropertiesWindow"
-import SingleElement from "./SingleElement"
+import { useCallback, useState } from 'react'
+import { ConfigurationComponentProps } from './PropertiesWindow'
+import SingleElement from './SingleElement'
 
 /**
  * AddNewSocket component provides a form input to add a new socket.
@@ -53,19 +53,19 @@ const AddNewSocket = ({ addSocket, valueTypes, definedValueType }) => {
             }
           }}
         />
-        {!definedValueType &&
+        {!definedValueType && (
           <select
             value={selectedValueType}
             onChange={e => setSelectedValueType(e.target.value)}
-            className="flex flex-1 px-3 bg-[var(--background-color)] rounded-sm">
-            {
-              valueTypes.map(type => (
-                <option value={type}>{type}</option>
-              ))
-            }
+            className="flex flex-1 px-3 bg-[var(--background-color)] rounded-sm"
+          >
+            {valueTypes.map(type => (
+              <option key={type} value={type}>
+                {type}
+              </option>
+            ))}
           </select>
-
-        }
+        )}
         {/* Add button */}
         <button style={{ margin: 0 }} onClick={onAdd} type="submit">
           Add
@@ -75,27 +75,29 @@ const AddNewSocket = ({ addSocket, valueTypes, definedValueType }) => {
   )
 }
 
-
-export const SocketConfig = ({ config, updateConfigKey, fullConfig }: ConfigurationComponentProps) => {
-  const defaultValues = [
-    'string',
-    'integer',
-    'boolean'
-  ]
+export const SocketConfig = ({
+  config,
+  updateConfigKey,
+  fullConfig,
+}: ConfigurationComponentProps) => {
+  const defaultValues = ['string', 'integer', 'boolean']
   const [configKey, sockets = []] = config
   const { socketValues = defaultValues, valueType = null } = fullConfig
 
-  const addSocket = useCallback((socket) => {
-    const newValue = [
-      ...sockets,
-      {
-        name: socket.name,
-        valueType: socket.valueType
-      }
-    ]
+  const addSocket = useCallback(
+    socket => {
+      const newValue = [
+        ...sockets,
+        {
+          name: socket.name,
+          valueType: socket.valueType,
+        },
+      ]
 
-    updateConfigKey(configKey, newValue)
-  }, [sockets, configKey, updateConfigKey])
+      updateConfigKey(configKey, newValue)
+    },
+    [sockets, configKey, updateConfigKey]
+  )
 
   const deleteSocket = (name: string) => {
     const newValue = sockets.filter((socket: any) => socket.name !== name)
@@ -114,7 +116,11 @@ export const SocketConfig = ({ config, updateConfigKey, fullConfig }: Configurat
         />
       ))}
       <div>
-        <AddNewSocket addSocket={addSocket} valueTypes={socketValues} definedValueType={valueType} />
+        <AddNewSocket
+          addSocket={addSocket}
+          valueTypes={socketValues}
+          definedValueType={valueType}
+        />
         {/* <Input value={key} onChange={e => setKey(e.target.value)} />
         <select value={valueType} onChange={e => setValueType(e.target.value)}>
           <option value="string">string</option>

packages/client/editor/src/components/TextEditorWindow/index.tsx

@@ -1,58 +1,101 @@
 import { debounce } from 'lodash'
 import Editor from '@monaco-editor/react'
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Window } from 'client/core'
-import { selectActiveNode } from 'client/state'
+import {
+  selectActiveNode,
+  selectTextEditorState,
+  setTextEditorState,
+  selectActiveInput,
+} from 'client/state'
 import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData'
 import WindowMessage from '../WindowMessage/WindowMessage'
 
 const TextEditor = props => {
-  const [code, setCodeState] = useState<string | undefined>(undefined)
+  const dispatch = useDispatch()
+  const [code, setCode] = useState<string | undefined>(undefined)
 
   const [editorOptions] = useState<Record<string, any>>({
     wordWrap: 'on',
     minimap: { enabled: false },
-    fontSize: 16
+    fontSize: 16,
   })
 
   const selectedNode = useSelector(selectActiveNode(props.tab.id))
-  const handleChange = useChangeNodeData(selectedNode?.id);
+  const handleChange = useChangeNodeData(selectedNode?.id)
+  const textEditorState = useSelector(selectTextEditorState)
+  const activeInput = useSelector(selectActiveInput)
+
+  const handleEditorWillMount = monaco => {
+    monaco.editor.defineTheme('sds-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      wordWrap: true,
+      colors: {
+        'editor.background': '#171b1c',
+      },
+    })
+  }
+
+  const debounceSave = debounce(code => {
+    handleChange('configuration', {
+      ...configuration,
+      textEditorData: code,
+    })
+  }, 1000)
+
+  const updateCode = rawCode => {
+    const code = rawCode.replace('\r\n', '\n')
+    console.log('DISPATCHING', code)
+    dispatch(setTextEditorState(code))
+    debounceSave(code)
+  }
 
   useEffect(() => {
-    if (!selectedNode) return
+    if (!selectedNode || textEditorState) return
     const { configuration } = selectedNode.data
     const { textEditorData } = configuration
     if (textEditorData === undefined) return
     setCode(textEditorData)
   }, [selectedNode])
 
+  useEffect(() => {
+    if (textEditorState === undefined) return
+    setCode(textEditorState || '')
+  }, [textEditorState])
+
   // listen for changes to the code and check if selected node is text template
   // then we want to parse the template for sockets and add them to the node
   useEffect(() => {
     if (!code) return
     if (!selectedNode) return
-    if (!selectedNode.data?.configuration?.textEditorOptions?.options?.language) return
+    if (!selectedNode.data?.configuration?.textEditorOptions?.options?.language)
+      return
     const { configuration } = selectedNode.data
     const { textEditorOptions } = configuration
     const { options } = textEditorOptions
     const { language } = options
     if (language !== 'handlebars') return
     // socket regex looks for handlebars style {{socketName}}
-    const socketRegex = /{{(.+?)}}/g;
-
+    const socketRegex = /{{(.+?)}}/g
 
     const socketMatches = code.matchAll(socketRegex)
     const sockets = []
     for (const match of socketMatches) {
       if (!match[1]) continue
-      const socketName = match[1].split(' ')
-        .filter(name =>
-          !name.startsWith('#') &&
-          !name.startsWith('/') &&
-          !name.startsWith('@') &&
-          name !== 'this'
-        ).join('').trim()
+      const socketName = match[1]
+        .split(' ')
+        .filter(
+          name =>
+            !name.startsWith('#') &&
+            !name.startsWith('/') &&
+            !name.startsWith('@') &&
+            name !== 'this'
+        )
+        .join('')
+        .trim()
 
       console.log('Socket name', socketName)
 
@@ -63,55 +106,24 @@ const TextEditor = props => {
         valueType: 'string',
       }
 
-      if (configuration.socketInputs.find(input => input.name === socketName)) continue
+      if (configuration.socketInputs.find(input => input.name === socketName))
+        continue
 
       sockets.push(socket)
     }
 
     handleChange('configuration', {
       ...configuration,
-      socketInputs: [
-        ...configuration.socketInputs,
-        ...sockets.filter(Boolean),
-      ],
+      socketInputs: [...configuration.socketInputs, ...sockets.filter(Boolean)],
     })
-    // handleChange('sockets', sockets)
   }, [code])
 
   if (!selectedNode) return null
 
   const { configuration } = selectedNode.data
   const { textEditorOptions, textEditorData } = configuration
 
-  const handleEditorWillMount = monaco => {
-    monaco.editor.defineTheme('sds-dark', {
-      base: 'vs-dark',
-      inherit: true,
-      rules: [],
-      wordWrap: true,
-      colors: {
-        'editor.background': "#171b1c",
-      },
-    })
-  }
-
-  const debounceSave = debounce((code) => {
-    handleChange('configuration', {
-      ...configuration,
-      textEditorData: code,
-    })
-  }, 1000)
-
-  const updateCode = rawCode => {
-    const code = rawCode.replace('\r\n', '\n')
-    debounceSave(code)
-  }
-
-  const setCode = update => {
-    setCodeState(update)
-  }
-
-  if (textEditorData === undefined)
+  if (textEditorData === undefined && !activeInput)
     return <WindowMessage content="Select a node with a text field" />
 
   return (