✨ Search

app/src/pages/Editor/Document.tsx

@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../state';
 import { V3TimedDocumentItem } from '../../core/document';
 import * as React from 'react';
-import { KeyboardEventHandler, MouseEventHandler, RefObject, useEffect, useRef } from 'react';
+import { KeyboardEventHandler, MouseEventHandler, RefObject, useEffect } from 'react';
 import { Cursor } from './Cursor';
 import { Paragraph } from './Paragraph';
 import { basename, extname } from 'path';
@@ -46,7 +46,7 @@ const DocumentContainer = styled.div<{ displaySpeakerNames: boolean }>`
   }
 `;
 
-export function Document(): JSX.Element {
+export function Document({ documentRef }: { documentRef: RefObject<HTMLDivElement> }): JSX.Element {
   const dispatch = useDispatch();
   const content = useSelector((state: RootState) =>
     state.editor.present ? memoizedTimedDocumentItems(state.editor.present.document.content) : []
@@ -67,18 +67,18 @@ export function Document(): JSX.Element {
   });
 
   const speakerColorIndices = memoizedSpeakerIndices(contentMacros);
-  const ref = useRef<HTMLDivElement>(null);
   const theme: Theme = useTheme();
 
   useEffect(() => {
-    ref.current && ref.current.focus();
-  }, [ref.current]);
+    console.log('setting current focus');
+    documentRef.current ? documentRef.current.focus() : {};
+  }, [documentRef.current]);
 
   const mouseDownHandler: MouseEventHandler = (e) => {
     if (e.detail != 1 || e.buttons != 1) return;
 
     e.preventDefault();
-    ref.current?.focus(); // sometimes we loose focus and then it is nice to be able to gain it back
+    documentRef.current?.focus(); // sometimes we loose focus and then it is nice to be able to gain it back
 
     if (e.detail == 1 && !e.shiftKey) {
       handleWordClick(dispatch, content, e);
@@ -135,16 +135,16 @@ export function Document(): JSX.Element {
   return (
     <DocumentContainer
       id={'document'}
-      ref={ref}
+      ref={documentRef}
       displaySpeakerNames={displaySpeakerNames}
       onMouseDown={mouseDownHandler}
       onMouseMove={mouseMoveHandler}
       tabIndex={1}
       onKeyDown={keyDownHandler}
     >
       <Cursor />
-      <SelectionMenu documentRef={ref} />
-      <SelectionApply documentRef={ref} />
+      <SelectionMenu documentRef={documentRef} />
+      <SelectionApply documentRef={documentRef} />
 
       <Pane display={'flex'} flexDirection={'row'} marginBottom={majorScale(4)}>
         <Pane

app/src/pages/Editor/MenuBar.tsx

@@ -10,6 +10,7 @@ import {
   toggleDisplayConfidence,
   toggleDisplaySpeakerNames,
   toggleDisplayVideo,
+  toggleSearchOverlay,
 } from '../../state/editor/display';
 import React from 'react';
 import {
@@ -111,6 +112,12 @@ export function EditorMenuBar(): JSX.Element {
           callback={() => dispatch(setFilterPopup(true))}
           accelerator={'CommandOrControl+Shift+F'}
         />
+
+        <MenuItem
+          label={'Search in document'}
+          callback={() => dispatch(toggleSearchOverlay())}
+          accelerator={'CommandOrControl+F'}
+        />
       </MenuGroup>
       <MenuGroup label={'View'}>
         <MenuCheckbox

app/src/pages/Editor/Search/index.tsx

@@ -0,0 +1,117 @@
+import React, { ChangeEvent, useState } from 'react';
+import { RootState } from '../../../state';
+import { useSelector } from 'react-redux';
+import { TextInput } from 'evergreen-ui';
+import { V3DocumentItem, V3TextItem, UuidExtension } from '../../../core/document';
+
+function paraToText(content: V3DocumentItem[]): string {
+  return content
+    .filter((x): x is V3TextItem & UuidExtension => x.type == 'text')
+    .map((x) => x.text)
+    .join(' ');
+}
+function filterContentParagraphLevel(
+  content: V3DocumentItem[],
+  tester: (_a0: string) => boolean
+): V3DocumentItem[] {
+  const filteredContent: V3DocumentItem[] = [];
+  let para = [];
+  for (const item of content) {
+    if (item.type !== 'paragraph_end') {
+      para.push(item);
+    } else {
+      const text = paraToText(para);
+      if (tester(text)) {
+        filteredContent.push(para[0]);
+      }
+      para = [];
+    }
+  }
+  return filteredContent;
+}
+
+function filterContentWordLevel(
+  content: V3DocumentItem[],
+  tester: (_a0: string) => boolean
+): V3DocumentItem[] {
+  const filteredContent: V3DocumentItem[] = [];
+  for (const item of content) {
+    if (item.type == 'text' && tester(item.text)) {
+      filteredContent.push(item);
+    }
+  }
+  return filteredContent;
+}
+
+function getScrollToItem(
+  content: V3DocumentItem[],
+  {
+    searchString,
+    level,
+  }: {
+    searchString: string;
+    level: 'word' | 'paragraph';
+  }
+): V3DocumentItem | null {
+  switch (level) {
+    case 'paragraph': {
+      const filteredParas = filterContentParagraphLevel(content, (s: string) =>
+        s.includes(searchString)
+      );
+      if (filteredParas.length > 0) {
+        return filteredParas[0];
+      }
+      return null;
+    }
+    case 'word': {
+      const filteredParas = filterContentWordLevel(content, (s: string) =>
+        s.includes(searchString)
+      );
+      if (filteredParas.length > 0) {
+        return filteredParas[0];
+      }
+      return null;
+    }
+  }
+}
+export function SearchOverlay(): JSX.Element {
+  const popupState = useSelector((state: RootState) => state.editor.present?.showSearchOverlay);
+
+  const [formState, setFormState] = useState<{
+    searchString: string;
+    level: 'word' | 'paragraph';
+    caseInsensitive: boolean;
+    useRegex: boolean;
+  }>({ searchString: '', level: 'paragraph', caseInsensitive: false, useRegex: false });
+
+  const matchElement = useSelector((state: RootState) =>
+    getScrollToItem(state.editor.present?.document.content || [], formState)
+  );
+
+  if (matchElement) {
+    console.log(matchElement);
+    const firstMachtItem = document.getElementById(`item-${matchElement.uuid}`);
+    const scrollContainer = document.getElementById('scroll-container');
+    if (firstMachtItem && scrollContainer) {
+      setTimeout(() => {
+        firstMachtItem.style.backgroundColor = 'rgba(255,255,0,0.2)';
+        scrollContainer.scrollTo({ top: firstMachtItem.offsetTop - 30, behavior: 'smooth' });
+      });
+    }
+  }
+
+  return popupState ? (
+    <>
+      <TextInput
+        width={'100%'}
+        value={formState.searchString}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          console.log(`val: "${e.target.value}"`);
+          setFormState((state) => ({ ...state, searchString: e.target.value }));
+        }}
+      />
+    </>
+  ) : (
+    <></>
+  );
+}

app/src/pages/Editor/index.tsx

@@ -4,14 +4,15 @@ import styled from 'styled-components';
 import { EditorTitleBar } from './TitleBar';
 import { Document } from './Document';
 import { Player } from './Player';
-import { KeyboardEventHandler } from 'react';
+import { KeyboardEventHandler, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { ExportDocumentDialog } from './ExportDocumentDialog';
 import { EditorTour } from '../../tour/EditorTour';
 import { togglePlaying } from '../../state/editor/play';
 import { insertParagraphEnd } from '../../state/editor/edit';
 import { EditorMenuBar } from './MenuBar';
 import { FilterDialog } from './Filter';
+import { SearchOverlay } from './Search';
 
 const MainContainer = styled(MainCenterColumn)`
   justify-content: start;
@@ -23,12 +24,17 @@ const MainContainer = styled(MainCenterColumn)`
 `;
 export function EditorPage(): JSX.Element {
   const dispatch = useDispatch();
+
+  const documentRef = useRef<HTMLDivElement>(null);
   const handleKeyPress: KeyboardEventHandler = (e) => {
-    if (e.key === ' ') {
-      dispatch(togglePlaying());
-      e.preventDefault();
-    } else if (e.key === 'Enter') {
-      dispatch(insertParagraphEnd());
+    if (document.activeElement?.tagName !== 'INPUT') {
+      // ignore key presses going to input fields
+      if (e.key === ' ') {
+        dispatch(togglePlaying());
+        e.preventDefault();
+      } else if (e.key === 'Enter') {
+        dispatch(insertParagraphEnd());
+      }
     }
   };
 
@@ -41,9 +47,10 @@ export function EditorPage(): JSX.Element {
       <EditorTitleBar />
       <ExportDocumentDialog />
       <FilterDialog />
+      <SearchOverlay />
 
       <MainContainer id={'scroll-container'}>
-        <Document />
+        <Document documentRef={documentRef} />
       </MainContainer>
     </AppContainer>
   );

app/src/state/editor/display.ts

@@ -43,6 +43,13 @@ export const setFilterPopup = createActionWithReducer<EditorState, boolean>(
   }
 );
 
+export const toggleSearchOverlay = createActionWithReducer<EditorState>(
+  'editor/toggleSearchOverlay',
+  (state) => {
+    state.showSearchOverlay = !state.showSearchOverlay;
+  }
+);
+
 export const setExportState = createActionWithReducer<
   EditorState,
   { running: boolean; progress: number }

app/src/state/editor/types.ts

@@ -48,6 +48,7 @@ export interface EditorState {
   exportPopup: ExportPopupState;
 
   filterPopup: boolean;
+  showSearchOverlay: boolean;
 
   transcriptCorrectionState: string | null;
 }
@@ -80,6 +81,7 @@ export const defaultEditorState: EditorState = {
 
   exportPopup: 'hidden',
   filterPopup: false,
+  showSearchOverlay: false,
 
   transcriptCorrectionState: null,
 };