delete support

deep-foundation · Jul 19, 2024 · 7bd2e50 · 7bd2e50
1 parent 28b4ee0
commit 7bd2e50
Show file tree

Hide file tree

Showing 6 changed files with 1,112 additions and 101 deletions.
diff --git a/imports/editor.tsx b/imports/editor.tsx
@@ -1,14 +1,12 @@
 import { useColorMode } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
-import React from 'react';
+import React, { useEffect, useMemo, useState } 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,
-}
+import ReactCodeMirror from '@uiw/react-codemirror';
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+import { langs } from '@uiw/codemirror-extensions-langs';
+import { useDebounceCallback } from '@react-hook/debounce';
 
 interface IEditor {
   refEditor?: any;
@@ -21,6 +19,7 @@ interface IEditor {
   lineNumbers?: string;
   defaultLanguage?: string;
   onMount?: (editor: any, monaco: any) => any;
+  [key:string]: any;
 }
 
 export const Editor = React.memo(({
@@ -34,41 +33,57 @@ export const Editor = React.memo(({
   lineNumbers = 'on',
   defaultLanguage="javascript",
   onMount,
+  ...props
 }:IEditor) => {
-  const refValue = React.useRef(value);
-  refValue.current = value;
-
+  const [v, setV] = useState(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);
-  }
+  const [lang, setLang] = useState<any>(langs.tsx());
+
+  // const calcLang = useDebounceCallback(async () => {
+  //   setLang(langs.tsx());
+  // }, 1000);
+  // useEffect(() => calcLang(), [v]);
 
-  return (<MonacoEditor
-    options={{
-      ...monacoEditorOptions,
-      minimap: {
-        enabled: minimap
-      },
-      // @ts-ignore
-      lineNumbers: lineNumbers,
+  return <ReactCodeMirror
+    value={value}
+    theme={colorMode === 'light' ? githubLight : githubDark}
+    extensions={[lang]}
+    onChange={(value, viewUpdate) => {
+      setV(value);
+      onChange && onChange(value);
     }}
-    height="100%"
-    width="100%"
-    theme={colorMode === 'light' ? 'light' : "vs-dark"}
-    defaultLanguage={defaultLanguage}
-    defaultValue={_.toString(value) || ''}
-    onChange={onChange}
-    onMount={handleEditorDidMount}
-  />)
+    {...props}
+  />
+  // 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}
+  // />)
 })
diff --git a/imports/finder.tsx b/imports/finder.tsx
@@ -17,7 +17,8 @@ export const FinderProvider = memo(function FinderProvider({ children }: { child
 }, () => true);
 
 export const FinderPopover = memo(function FinderPopover({
-    link,
+    linkId,
+    query,
     onSubmit,
     onChange,
     onOpen,
@@ -29,7 +30,8 @@ export const FinderPopover = memo(function FinderPopover({
     mode = 'popover',
     header = '',
   }: {
-    link: Link<Id>;
+    linkId: Id;
+    query?: any;
     onSubmit: (link) => void;
     onChange?: (link) => void;
     onOpen?: () => void;
@@ -47,7 +49,9 @@ export const FinderPopover = memo(function FinderPopover({
   const { onOpen: _onOpen, onClose: _onClose, isOpen: _isOpen } = __disclosure || _disclosure;
 
   const tree = _isOpen && <Tree
-    scope={`finder-tree-${link.id}`}
+    linkId={linkId}
+    query={query}
+    scope={`finder-tree-${linkId}`}
     insert={false}
     onChange={(l, p) => {
       onChange && onChange(l);
@@ -96,7 +100,7 @@ export const FinderPopover = memo(function FinderPopover({
       <ModalContent w='80vw' h='80vh' position='relative'>
         <ModalHeader>{header}</ModalHeader>
         <Box position='absolute' bottom='-0.5em' right='-0.5em' boxShadow='dark-lg' zIndex={2}>
-          {!!selectedLink && <LinkButton id={selectedLink?.id}/>}
+          {!!selectedLink && <LinkButton id={selectedLink?.id} maxW='100%'/>}
         </Box>
         <ModalCloseButton />
         <ModalBody>