Add initial global search setup

Add search functionality and result data structures Add preview of found items, highlighted style, the rows of found items Add note preview Add selection of items in search Add text highlight in editor preview Add editor preview focus Add editor preview while clicking on found item Add better ID management and state update fix Add some stability updates (max searched content, max result line length) Add double click on search item to lead to focused item in editor Add focusLine number for editor to route params Add better colors across themes for search
BoostIO · Dec 5, 2020 · 8739912 · 8739912
1 parent ca2ebab
commit 8739912
Show file tree

Hide file tree

Showing 19 changed files with 569 additions and 60 deletions.
diff --git a/src/components/PreferencesModal/styled.tsx b/src/components/PreferencesModal/styled.tsx
@@ -7,6 +7,7 @@ import {
   tableStyle,
   disabledUiTextColor,
   PrimaryTextColor,
+  searchMatchHighlightStyle,
 } from '../../lib/styled/styleFunctions'
 
 export const Section = styled.section`
@@ -43,7 +44,7 @@ export const SectionControl = styled.div`
 `
 
 export const SectionSelect = styled.select`
-  ${selectStyle}
+  ${selectStyle};
   padding: 0 16px;
   width: 200px;
   height: 40px;
@@ -56,7 +57,7 @@ export const SectionSelect = styled.select`
 `
 
 export const SectionPrimaryButton = styled.button`
-  ${primaryButtonStyle}
+  ${primaryButtonStyle};
   padding: 0 16px;
   height: 40px;
   border-radius: 2px;
@@ -66,7 +67,7 @@ export const SectionPrimaryButton = styled.button`
 `
 
 export const SectionSecondaryButton = styled.button`
-  ${secondaryButtonStyle}
+  ${secondaryButtonStyle};
   padding: 0 16px;
   height: 40px;
   border-radius: 2px;
@@ -75,7 +76,7 @@ export const SectionSecondaryButton = styled.button`
 `
 
 export const SectionInput = styled.input`
-  ${inputStyle}
+  ${inputStyle};
   padding: 0 16px;
   width: 200px;
   height: 40px;
@@ -96,11 +97,24 @@ export const TopMargin = styled.div`
 `
 
 export const DeleteStorageButton = styled.button`
-  ${secondaryButtonStyle}
+  ${secondaryButtonStyle};
   padding: 0 16px;
   height: 40px;
   border-radius: 2px;
   cursor: pointer;
   vertical-align: middle;
   align-items: center;
 `
+
+export const SectionListSelect = styled.div`
+  ${selectStyle};
+  padding: 0 16px;
+  width: 200px;
+  height: 40px;
+  border-radius: 2px;
+  font-size: 14px;
+`
+
+export const SearchMatchHighlight = styled.span`
+  ${searchMatchHighlightStyle}
+`
diff --git a/src/components/molecules/SearchModalNoteResultItem.tsx b/src/components/molecules/SearchModalNoteResultItem.tsx
@@ -8,50 +8,121 @@ import {
   borderBottom,
   textOverflow,
 } from '../../lib/styled/styleFunctions'
+import {
+  getSearchResultKey,
+  MAX_SEARCH_PREVIEW_LINE_LENGTH,
+  SearchResult,
+} from '../../lib/search/search'
+import { isColorBright } from '../../lib/colors'
+import { SearchMatchHighlight } from '../PreferencesModal/styled'
 
 interface SearchModalNoteResultItemProps {
   note: NoteDoc
+  selectedItemId: string
+  searchResults: SearchResult[]
   navigateToNote: (noteId: string) => void
+  updateSelectedItem: (note: NoteDoc, selectedId: string) => void
+  navigateToEditorFocused: (noteId: string, lineNum: number) => void
 }
 
 const SearchModalNoteResultItem = ({
   note,
+  searchResults,
   navigateToNote,
+  selectedItemId,
+  updateSelectedItem,
+  navigateToEditorFocused,
 }: SearchModalNoteResultItemProps) => {
   const navigate = useCallback(() => {
     navigateToNote(note._id)
   }, [navigateToNote, note._id])
 
+  const highlightMatchedTerm = useCallback((line, matchStr) => {
+    const parts = line.split(new RegExp(`(${matchStr})`, 'gi'))
+    return (
+      <span>
+        {parts.map((part: string, i: number) =>
+          part.toLowerCase() === matchStr.toLowerCase() ? (
+            <SearchMatchHighlight key={i}>{matchStr}</SearchMatchHighlight>
+          ) : (
+            part
+          )
+        )}
+      </span>
+    )
+  }, [])
+  const beautifyPreviewLine = useCallback(
+    (line, matchStr) => {
+      const beautifiedLine =
+        line.substring(0, MAX_SEARCH_PREVIEW_LINE_LENGTH) +
+        (line.length > MAX_SEARCH_PREVIEW_LINE_LENGTH ? '...' : '')
+      return highlightMatchedTerm(beautifiedLine, matchStr)
+    },
+    [highlightMatchedTerm]
+  )
+
   return (
-    <Container onClick={navigate}>
-      <div className='header'>
-        <div className='icon'>
-          <Icon path={mdiTextBoxOutline} />
-        </div>
-        <div className='title'>{note.title}</div>
-      </div>
-      <div className='meta'>
-        <div className='folderPathname'>
-          <Icon className='icon' path={mdiFolder} />
-          {note.folderPathname}
+    <Container>
+      <MetaContainer onClick={navigate}>
+        <div className='header'>
+          <div className='icon'>
+            <Icon path={mdiTextBoxOutline} />
+          </div>
+          <div className='title'>{note.title}</div>
         </div>
-        {note.tags.length > 0 && (
-          <div className='tags'>
-            <Icon className='icon' path={mdiTagMultiple} />{' '}
-            {note.tags.map((tag) => tag).join(', ')}
+        <div className='meta'>
+          <div className='folderPathname'>
+            <Icon className='icon' path={mdiFolder} />
+            {note.folderPathname}
           </div>
-        )}
-      </div>
+          {note.tags.length > 0 && (
+            <div className='tags'>
+              <Icon className='icon' path={mdiTagMultiple} />{' '}
+              {note.tags.map((tag) => tag).join(', ')}
+            </div>
+          )}
+        </div>
+      </MetaContainer>
+
+      <SearchResultContainer>
+        {searchResults.length > 0 &&
+          searchResults.map((result) => (
+            <SearchResultItem
+              className={
+                selectedItemId == result.id ? 'search-result-selected' : ''
+              }
+              key={getSearchResultKey(note._id, result.id)}
+              onClick={() => updateSelectedItem(note, result.id)}
+              onDoubleClick={() =>
+                navigateToEditorFocused(note._id, result.lineNum - 1)
+              }
+            >
+              <SearchResultLeft title={result.lineStr}>
+                {beautifyPreviewLine(result.lineStr, result.matchStr)}
+              </SearchResultLeft>
+              <SearchResultRight>{result.lineNum}</SearchResultRight>
+            </SearchResultItem>
+          ))}
+      </SearchResultContainer>
     </Container>
   )
 }
 
 export default SearchModalNoteResultItem
 
-const Container = styled.div`
+const Container = styled.div``
+
+const SearchResultContainer = styled.div`
+  padding: 10px;
+  cursor: pointer;
+  ${borderBottom};
+  user-select: none;
+`
+
+const MetaContainer = styled.div`
   padding: 10px;
   cursor: pointer;
-  ${borderBottom}
+  ${borderBottom};
   user-select: none;
 
   &:hover {
@@ -60,6 +131,7 @@ const Container = styled.div`
   &:hover:active {
     background-color: ${({ theme }) => theme.navItemHoverActiveBackgroundColor};
   }
+
   & > .header {
     font-size: 18px;
     display: flex;
@@ -109,3 +181,50 @@ const Container = styled.div`
     border-bottom: none;
   }
 `
+
+const SearchResultItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  overflow: hidden;
+
+  margin-top: 0.3em;
+
+  &.search-result-selected {
+    border-radius: 4px;
+    padding: 2px;
+    background-color: ${({ theme }) =>
+      theme.searchItemSelectionBackgroundColor};
+    filter: brightness(
+      ${({ theme }) => (isColorBright(theme.activeBackgroundColor) ? 85 : 115)}%
+    );
+    }
+  }
+
+  &:hover {
+    border-radius: 4px;
+    background-color: ${({ theme }) =>
+      theme.secondaryButtonHoverBackgroundColor};
+    filter: brightness(
+      ${({ theme }) =>
+        isColorBright(theme.secondaryButtonHoverBackgroundColor) ? 85 : 115}%
+    );
+  }
+`
+
+const SearchResultLeft = styled.div`
+  align-self: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:before {
+    content: attr(content);
+  }
+`
+
+const SearchResultRight = styled.div`
+  align-self: flex-end;
+`
diff --git a/src/components/organisms/NoteDetail.tsx b/src/components/organisms/NoteDetail.tsx
@@ -34,6 +34,7 @@ type NoteDetailProps = {
     props: Partial<NoteDocEditibleProps>
   ) => Promise<void | NoteDoc>
   viewMode: ViewModeType
+  initialCursorPos: EditorPosition
   addAttachments(storageId: string, files: File[]): Promise<Attachment[]>
 }
 
@@ -73,6 +74,12 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
   codeMirror?: CodeMirror.EditorFromTextArea
   codeMirrorRef = (codeMirror: CodeMirror.EditorFromTextArea) => {
     this.codeMirror = codeMirror
+
+    // Update cursor if needed
+    if (this.props.initialCursorPos) {
+      this.codeMirror.focus()
+      this.codeMirror.setCursor(this.props.initialCursorPos)
+    }
   }
 
   static getDerivedStateFromProps(
@@ -86,8 +93,8 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
         prevNoteId: note._id,
         content: note.content,
         currentCursor: {
-          line: 0,
-          ch: 0,
+          line: props.initialCursorPos ? props.initialCursorPos.line : 0,
+          ch: props.initialCursorPos ? props.initialCursorPos.ch : 0,
         },
         currentSelections: [
           {
@@ -285,13 +292,13 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
   }
 
   render() {
-    const { note, storage, viewMode } = this.props
+    const { note, storage, viewMode, initialCursorPos } = this.props
     const { currentCursor, currentSelections } = this.state
 
     const codeEditor = (
       <CustomizedCodeEditor
         className='editor'
-        key={note._id}
+        key={note._id + initialCursorPos.line}
         codeMirrorRef={this.codeMirrorRef}
         value={this.state.content}
         onChange={this.updateContent}

diff --git a/src/components/organisms/NoteStorageNavigator.tsx b/src/components/organisms/NoteStorageNavigator.tsx
@@ -215,7 +215,7 @@ const NoteStorageNavigator = ({ storage }: NoteStorageNavigatorProps) => {
   const { toggleShowSearchModal } = useSearchModal()
 
   useGlobalKeyDownHandler((event) => {
-    if (isWithGeneralCtrlKey(event) && event.key === 'p') {
+    if (isWithGeneralCtrlKey(event) && event.key.toLowerCase() === 'p') {
       toggleShowSearchModal()
     }
   })
@@ -300,7 +300,6 @@ const TopButton = styled.button`
 const SearchButton = styled.button`
   margin: 0 8px;
   height: 34px;
-  padding: 0;
   color: ${({ theme }) => theme.secondaryButtonLabelColor};
   background-color: ${({ theme }) => theme.secondaryButtonBackgroundColor};
   border: none;
@@ -321,7 +320,7 @@ const SearchButton = styled.button`
   & > .icon {
     width: 24px;
     height: 24px;
-    ${flexCenter}
+    ${flexCenter};
     flex-shrink: 0;
   }
   & > .label {
@@ -333,7 +332,7 @@ const SearchButton = styled.button`
     display: none;
     font-size: 12px;
     margin-left: 5px;
-    ${textOverflow}
+    ${textOverflow};
     align-items: center;
     flex-shrink: 0;
   }
@@ -342,7 +341,6 @@ const SearchButton = styled.button`
 const NewNoteButton = styled.button`
   margin: 8px 8px;
   height: 34px;
-  padding: 0;
   color: ${({ theme }) => theme.primaryButtonLabelColor};
   background-color: ${({ theme }) => theme.primaryButtonBackgroundColor};
   border: none;
@@ -363,7 +361,7 @@ const NewNoteButton = styled.button`
   & > .icon {
     width: 24px;
     height: 24px;
-    ${flexCenter}
+    ${flexCenter};
     flex-shrink: 0;
   }
   & > .label {
@@ -374,7 +372,7 @@ const NewNoteButton = styled.button`
     display: none;
     font-size: 12px;
     margin-left: 5px;
-    ${textOverflow}
+    ${textOverflow};
     align-items: center;
     & > .icon {
       flex-shrink: 0;