fix: search on macos

closes #49
marabesi · Oct 22, 2023 · 28013ab · 28013ab
1 parent 405e9d1
commit 28013ab
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 60 deletions.
diff --git a/src/components/ui/editor/JsonEditor.tsx b/src/components/ui/editor/JsonEditor.tsx
@@ -1,8 +1,8 @@
-import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
+import CodeMirror, { BasicSetupOptions, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import fullConfig from '../../../tailwindResolver';
 import { json } from '@codemirror/lang-json';
 import { SettingsContext, ThemeContext } from '../../../App';
-import { CSSProperties, useContext } from 'react';
+import { CSSProperties, ForwardedRef, forwardRef, useContext } from 'react';
 import { Option, Properties } from '../../../types/components/Editor';
 import { duotoneLight } from '@uiw/codemirror-theme-duotone';
 
@@ -20,7 +20,8 @@ interface Props{
   contenteditable: boolean;
 }
 
-export default function JsonEditor({ input, onChange, className, ...rest }: Props) {
+export default forwardRef(function JsonEditor(props: Props, ref: ForwardedRef<ReactCodeMirrorRef>) {
+  const { input, onChange, className, ...rest } = props;
   const theme = useContext(ThemeContext);
   const settings = useContext(SettingsContext);
 
@@ -52,6 +53,7 @@ export default function JsonEditor({ input, onChange, className, ...rest }: Prop
     <>
       <textarea data-testid={`raw-${rest['data-testid']}`} className="hidden" defaultValue={input}></textarea>
       <CodeMirror
+        ref={ref}
         value={input}
         onChange={handleChange}
         className={[className, 'h-full'].join(' ')}
@@ -64,4 +66,4 @@ export default function JsonEditor({ input, onChange, className, ...rest }: Prop
       />
     </>
   );
-}
+});
diff --git a/src/pages/Editors.tsx b/src/pages/Editors.tsx
@@ -1,11 +1,13 @@
-import { useEffect, useState, useRef } from 'react';
+import { Ref, useEffect, useRef, useState } from 'react';
+import { openSearchPanel } from '@codemirror/search';
 import JsonEditor from '../components/ui/editor/JsonEditor';
 import CleanUp from '../core/cleanUp';
 import ResultMenu from '../components/ui/menu/ResultMenu';
 import JsonMenu from '../components/ui/menu/JsonMenu';
 import EditorContainer from '../components/ui/editor/EditorContainer';
 import { EditorsPageProps } from '../types/pages';
 import Loading from '../components/ui/Loading';
+import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 
 const cleanUp = new CleanUp();
 const defaultSpacing = '2';
@@ -54,6 +56,8 @@ export default function Editors({ onPersist, currentJson }: EditorsPageProps) {
   const [result, setResult] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [spacing, setSpacing] = useState<string>(defaultSpacing);
+  const jsonReferenceEditor = useRef<ReactCodeMirrorRef>();
+  const resultReferenceEditor: any = useRef();
 
   useEffect(() => {
     worker.current = new Worker(URL.createObjectURL(new Blob([code])));
@@ -120,62 +124,52 @@ export default function Editors({ onPersist, currentJson }: EditorsPageProps) {
     onChange(originalJson, newSpacing);
   };
 
-  const search = (dataTestId: string) => {
-    const editor = document.querySelector(`[data-testid=${dataTestId}] .cm-content`) as HTMLElement;
-    if (editor) {
-      editor.focus();
-      editor.dispatchEvent(new KeyboardEvent('keydown', {
-        'key': 'f',
-        ctrlKey: true,
-      }));
-    }
-  };
 
-  return (
-    <div className="p-1 mb-8 h-full" style={{ height: '80vh' }}>
-      <div className="flex h-full justify-center">
-        <EditorContainer>
-          <JsonMenu
-            pasteFromClipboard={navigator.clipboard && typeof navigator.clipboard.write === 'function' ? pasteFromClipboard : false}
-            cleanup={cleanup}
-            onLoadedFile={(text: string) => onChange(text, spacing)}
-            onSearch={() => search('json')}
-          />
-
-          <JsonEditor
-            input={originalJson}
-            onChange={event => onChange(event.value, spacing)}
-            data-testid="json"
-            contenteditable={true}
-          />
-        </EditorContainer>
-        <div className="w-12 flex justify-center items-center">
-          {inProgress ?
-            <Loading className="animate-spin h-6 w-6 text-blue-900 dark:text-gray-400" data-testid="loading" />
-            : null}
-        </div>
-        <EditorContainer>
-          <ResultMenu
-            spacing={spacing}
-            updateSpacing={updateSpacing}
-            writeToClipboard={navigator.clipboard && typeof navigator.clipboard.read === 'function' ? writeToClipboard : false}
-            cleanWhiteSpaces={cleanWhiteSpaces}
-            cleanNewLines={cleanNewLines}
-            cleanNewLinesAndSpaces={cleanNewLinesAndSpaces}
-            onSearch={() => search('result')}
-          />
-
-          <JsonEditor
-            input={result}
-            className="result"
-            data-testid="result"
-            contenteditable={true}
-          />
-        </EditorContainer>
-      </div>
-      <div className="bg-red-600 m-1 mt-2 text-center text-white">
-        {error && <p data-testid="error">{error}</p>}
+  return <div className="p-1 mb-8 h-full" style={{ height: '80vh' }}>
+    <div className="flex h-full justify-center">
+      <EditorContainer>
+        <JsonMenu
+          pasteFromClipboard={navigator.clipboard && typeof navigator.clipboard.write === 'function' ? pasteFromClipboard : false}
+          cleanup={cleanup}
+          onLoadedFile={(text: string) => onChange(text, spacing)}
+          onSearch={() => openSearchPanel(jsonReferenceEditor.current?.view!!)}
+        />
+
+        <JsonEditor
+          input={originalJson}
+          onChange={event => onChange(event.value, spacing)}
+          data-testid="json"
+          contenteditable={true}
+          ref={jsonReferenceEditor as Ref<ReactCodeMirrorRef> | undefined}
+        />
+      </EditorContainer>
+      <div className="w-12 flex justify-center items-center">
+        {inProgress ?
+          <Loading className="animate-spin h-6 w-6 text-blue-900 dark:text-gray-400" data-testid="loading" />
+          : null}
       </div>
+      <EditorContainer>
+        <ResultMenu
+          spacing={spacing}
+          updateSpacing={updateSpacing}
+          writeToClipboard={navigator.clipboard && typeof navigator.clipboard.read === 'function' ? writeToClipboard : false}
+          cleanWhiteSpaces={cleanWhiteSpaces}
+          cleanNewLines={cleanNewLines}
+          cleanNewLinesAndSpaces={cleanNewLinesAndSpaces}
+          onSearch={() => openSearchPanel(resultReferenceEditor.current.view)}
+        />
+
+        <JsonEditor
+          input={result}
+          className="result"
+          data-testid="result"
+          contenteditable={true}
+          ref={resultReferenceEditor}
+        />
+      </EditorContainer>
+    </div>
+    <div className="bg-red-600 m-1 mt-2 text-center text-white">
+      {error && <p data-testid="error">{error}</p>}
     </div>
-  );
+  </div>;
 }