Open Aruseli opened 1 year ago
insert this code in to queryClientQuery tsx (723)
({ deep, require }) => { const React = require('react'); const { useState } = React; const json5 = require('json5'); const { useContainer, Resize, EditorTextArea, CustomizableIcon } = require('@deep-foundation/deepcase'); const MonacoEditor = require('@monaco-editor/react'); const { Box, IconButton } = require('@chakra-ui/react'); const { BsCheck2, BsLightbulbFill, BsLightbulbOff } = require('react-icons/bs'); const motion = require('framer-motion'); // Only objects editor. return ({ fillSize, style, link }) => { // console.log('queryClientHandler', 'MonacoEditor'); const currentValue = deep.stringify(link?.value?.value) || ''; const [value, setValue] = useState(currentValue); const isSaved = value == currentValue; const [container] = useContainer(); const { data } = deep.useDeepSubscription({ type_id: { _in: [ deep.idLocal('@deep-foundation/core', 'Active'), deep.idLocal('@deep-foundation/core', 'Contain'), ] }, to_id: { _eq: link.id }, }); const contain = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain')) const active = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active')) const [viewSize, setViewSize] = useState({width: 200, height: 150}); const terminalBorderWidth = viewSize.width - 1; const terminalBorderHeight = viewSize.height - 1; const stackHeight = viewSize.height - 2; // const [activate, setActive] = useState(false); const [nested, setNested] = useState(false); const body = <div style={{ width: 300, height: 200, ...style, position: 'relative', }} > <Box display='grid' gridTemplateColumns='repeat(2, max-content)' // gridRow='1 / 2' height='inherit' > <Box overflow='hidden' sx={{ borderRadius: 5 }} w={terminalBorderWidth} h={terminalBorderHeight} border='1px dashed #605c60' > <MonacoEditor options={{ // ...monacoEditorOptions, minimap: { enabled: false }, lineNumbers: 'off', wordWrap: true, }} height="100%" width="100%" // theme={colorMode === 'light' ? 'light' : "vs-dark"} defaultLanguage="javascript" defaultValue={value || ''} onChange={(value) => { console.log('queryClientHandler', 'MonacoEditor', value); setValue(value); }} // onMount={handleEditorDidMount} /> </Box> <Box as={motion.div} // animate={controlStack} // variants={stackVariants} // initial='initial' height={stackHeight} display='flex' justifyContent='space-between' flexDirection='column' ml={nested ? 0 : '0.2rem'} > <IconButton as={motion.div} // variants={variants} // initial='initial' // whileInView='view' // animate='view' aria-label='activate/inactivate button' isRound variant='outline' sx={{ borderColor: active ? '#111' : 'rgb(0, 128, 255)' }} mr={nested ? '0.2rem' : 0} mt={nested ? '0.2rem' : 0} size='xs' onClick={async () => { if (active) { await deep.delete({ _or: [{ id: { _eq: active.id }, }, { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: link.id, to_id: active.id, }], }); } else { await deep.insert({ type_id: deep.idLocal('@deep-foundation/core', 'Active'), from_id: contain.from_id, to_id: contain.to_id, in: { data: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: link.id, } }, }); } }} icon={active ? <BsLightbulbOff /> : <CustomizableIcon Component={BsLightbulbFill} value={{ color: 'rgb(0, 128, 255)' }} />} /> <IconButton as={motion.div} // variants={variants} // initial='initial' // animate={control} // whileInView='view' // isDisabled={isSaved} aria-label='save button' isRound variant='outline' sx={{ borderColor: 'rgb(0, 128, 255)' }} mr={nested ? '0.2rem' : 0} mb={nested ? '0.2rem' : 0} // isLoading={!isSaved} size='xs' icon={<CustomizableIcon Component={BsCheck2} value={{ color: 'rgb(0, 128, 255)' }} />} onClick={() => { try { const _value = json5.parse(value); if (!link.value) deep.insert({ link_id: link.id, value: _value, }, { table: 'objects' }); deep.update({ link_id: link.id }, { value: _value }, { table: 'objects' }); } catch(error) {} }} /> </Box> </Box> </div>; return <> {!fillSize ? body : <Resize style={{ position: 'relative', // overflow: nested ? 'hidden' : 'inherit', borderRadius: 5, border: 'none', }} >{body}</Resize>}</>; } }
This may be related to the use of npm run snapshot:last @Menzorg
npm run snapshot:last
https://github.com/deep-foundation/deeplinks/issues/108
insert this code in to queryClientQuery tsx (723)