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

Fix multiline search
Add all previous features in multiline search
Focus at correct item on multiple items (local column)
Focus at correct editor position (line and column) via route hash

Author: Komediruzecki

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}
+`

src/components/molecules/SearchModalNoteResultItem.tsx

@@ -8,50 +8,139 @@ 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'
+import { escapeRegExp } from '../../lib/string'
 
 interface SearchModalNoteResultItemProps {
   note: NoteDoc
+  selectedItemId: string
+  searchResults: SearchResult[]
   navigateToNote: (noteId: string) => void
+  updateSelectedItem: (note: NoteDoc, selectedId: string) => void
+  navigateToEditorFocused: (
+    noteId: string,
+    lineNum: number,
+    lineColumn?: 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(`(${escapeRegExp(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 multiline = matchStr.indexOf('\n') != -1
+      const beautifiedLine =
+        line.substring(0, MAX_SEARCH_PREVIEW_LINE_LENGTH) +
+        (line.length > MAX_SEARCH_PREVIEW_LINE_LENGTH ? '...' : '')
+      if (multiline) {
+        return (
+          <span>
+            <SearchMatchHighlight>{line}</SearchMatchHighlight>
+          </span>
+        )
+      } else {
+        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,
+                  result.matchColumn
+                )
+              }
+            >
+              <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 +149,7 @@ const Container = styled.div`
   &:hover:active {
     background-color: ${({ theme }) => theme.navItemHoverActiveBackgroundColor};
   }
+
   & > .header {
     font-size: 18px;
     display: flex;
@@ -86,7 +176,7 @@ const Container = styled.div`
     & > .folderPathname {
       display: flex;
       align-items: center;
-      max-width: 150px;
+      max-width: 350px;
       ${textOverflow}
       &>.icon {
         margin-right: 4px;
@@ -97,7 +187,7 @@ const Container = styled.div`
       margin-left: 8px;
       display: flex;
       align-items: center;
-      max-width: 150px;
+      max-width: 350px;
       ${textOverflow}
       &>.icon {
         margin-right: 4px;
@@ -109,3 +199,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;
+`

src/components/organisms/NoteDetail.tsx

@@ -34,6 +34,7 @@ type NoteDetailProps = {
     props: Partial<NoteDocEditibleProps>
   ) => Promise<void | NoteDoc>
   viewMode: ViewModeType
+  initialCursorPosition: 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.initialCursorPosition) {
+      this.codeMirror.focus()
+      this.codeMirror.setCursor(this.props.initialCursorPosition)
+    }
   }
 
   static getDerivedStateFromProps(
@@ -86,8 +93,10 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
         prevNoteId: note._id,
         content: note.content,
         currentCursor: {
-          line: 0,
-          ch: 0,
+          line: props.initialCursorPosition
+            ? props.initialCursorPosition.line
+            : 0,
+          ch: props.initialCursorPosition ? props.initialCursorPosition.ch : 0,
         },
         currentSelections: [
           {
@@ -285,13 +294,13 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
   }
 
   render() {
-    const { note, storage, viewMode } = this.props
+    const { note, storage, viewMode, initialCursorPosition } = this.props
     const { currentCursor, currentSelections } = this.state
 
     const codeEditor = (
       <CustomizedCodeEditor
         className='editor'
-        key={note._id}
+        key={note._id + initialCursorPosition.line}
         codeMirrorRef={this.codeMirrorRef}
         value={this.state.content}
         onChange={this.updateContent}