0.0.13

Author: ivansglazunov

imports/cyto.tsx

@@ -0,0 +1,74 @@
+import { useColorMode } from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import React from 'react';
+import _ from 'lodash';
+import { OnMount } from '@monaco-editor/react';
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
+
+const monacoEditorOptions = {
+  wordWrap: true,
+}
+
+interface IEditor {
+  refEditor?: any;
+  value?: any;
+  onChange?: (value: string) => void;
+  onSave?: (value: string) => void;
+  onClose?: () => void;
+  onExit?: () => void;
+  minimap?: boolean;
+  lineNumbers?: string;
+  defaultLanguage?: string;
+  onMount?: (editor: any, monaco: any) => any;
+}
+
+export const Editor = React.memo(({
+  refEditor = { current: undefined },
+  value = '',
+  onChange,
+  onSave,
+  onClose,
+  onExit,
+  minimap = true,
+  lineNumbers = 'on',
+  defaultLanguage="javascript",
+  onMount,
+}:IEditor) => {
+  const refValue = React.useRef(value);
+  refValue.current = value;
+
+  const { colorMode } = useColorMode();
+  const handleEditorDidMount: OnMount = (editor, monaco) => {
+    refEditor.current = { editor, monaco };
+    editor.getModel().updateOptions({ tabSize: 2 });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      onSave && onSave(refValue.current);
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
+        onClose && onClose();
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Escape, () => {
+      onExit && onExit();
+    });
+    onMount && onMount(editor, monaco);
+  }
+
+  return (<MonacoEditor
+    options={{
+      ...monacoEditorOptions,
+      minimap: {
+        enabled: minimap
+      },
+      // @ts-ignore
+      lineNumbers: lineNumbers,
+    }}
+    height="100%"
+    width="100%"
+    theme={colorMode === 'light' ? 'light' : "vs-dark"}
+    defaultLanguage={defaultLanguage}
+    defaultValue={_.toString(value) || ''}
+    onChange={onChange}
+    onMount={handleEditorDidMount}
+  />)
+})

imports/editor.tsx

@@ -1,17 +1,20 @@
 import {
   Box,
-  Button
+  Button,
+  Heading,
+  Text,
 } from '@chakra-ui/react';
+import { useDeep } from "@deep-foundation/deeplinks/imports/client";
 import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export const LinkButton = ({
-  id, name, type, icon, isActive, onClick,
+  id, name: _name, type: _type, icon, isActive, onClick,
   buttonRef,
   ...props
 }: {
   id: Id;
   name?: string;
-  type: string;
+  type?: string;
   icon: string;
   isActive: boolean;
   onClick?: (id: Id) => void;
@@ -20,20 +23,40 @@ export const LinkButton = ({
 
   [key: string]: any;
 }) => {
+  const deep = useDeep();
+  const link = deep?.minilinks?.byId[id];
+  const name = _name || deep.nameLocal(id);
+  const type = _type || deep.nameLocal(link?.type_id);
   return <Button
     ref={buttonRef}
-    h='3em' variant={isActive ? 'active' : 'solid'}
+    variant={isActive ? 'active' : 'solid'}
     onClick={(e) => {
       e.stopPropagation();
       e.preventDefault();
       onClick && onClick(id);
     }}
     justifyContent={'left'}
+    h='auto' pt={2} pb={2}
     {...props}
   >
-    {icon} <Box textAlign='left' pl='0.5em'>
+    {icon} <Box textAlign='left' pl='0.5em' w='100%' overflow='hidden'>
       {!!((name) || (type)) && <Box fontSize="sm">{name || type}</Box>}
       <Box fontSize="xxs">{name ? type : ''} {id}</Box>
+      {!!props?.children && props.children}
+      {!!link?.value && <>
+        <Text fontSize="xxs" opacity={0.5}>value:</Text>
+        <Text fontSize="xs">
+          {typeof(link?.value?.value) == 'string' && <>
+            <Heading as='pre' fontSize='xs' noOfLines={1} w='100%'>{link?.value?.value}</Heading>
+          </>}
+          {typeof(link?.value?.value) == 'number' && <>
+            <Heading as='pre' fontSize='xs' noOfLines={1} w='100%'>{link?.value?.value}</Heading>
+          </>}
+          {typeof(link?.value?.value) == 'object' && <>
+            <Heading as='pre' fontSize='xs' noOfLines={1} w='100%'>{JSON.stringify(link?.value?.value)}</Heading>
+          </>}
+        </Text>
+      </>}
     </Box>
   </Button>;
 };