feat: improved search

fix: When note is saved, the text editor is refreshed and cursor position is lost as well as scrolled to the top

app/PouchInit.tsx

@@ -18,7 +18,6 @@ PouchDB.plugin(pouchdbDebug)
 
 PouchDB.debug.enable('*');
 
-
 export const notesDB = new PouchDB('data/notes');
 //  const configDB = new PouchDB('data/config');
 

app/components/EditorPane/EditorPane.tsx

@@ -137,8 +137,9 @@ export default function EditorPane({contentArea, note,
 
         {(!note.kind || note.kind === 'normal') && <>
           {!note.editor || note.editor === 'markdown' ? <MarkdownEditor
-            id={noteref }
-            key={noteref}
+            id={note._id}
+            key={note._id}
+            // key={noteref}  // reopens #61 and closes #122
             note={note}
             noteActions={noteActions}
            />

app/components/EditorPane/MarkdownEditor/MarkdownEditor.tsx

@@ -1,6 +1,5 @@
 import React, { Component, useCallback  } from 'react';
 import { Controlled as ReactCodeMirror } from 'react-codemirror2';
-import { debounce } from "lodash";
 import { Scrollbars } from 'react-custom-scrollbars';
 import 'codemirror/lib/codemirror';
 
@@ -16,35 +15,36 @@ import 'hypermd/keymap/hypermd';
 import 'hypermd/addon/hide-token';
 import 'hypermd/addon/cursor-debounce';
 import 'hypermd/addon/fold';
-import 'hypermd/addon/fold-emoji';
-import 'hypermd/addon/fold-math';
+
 // import 'hypermd/addon/fold-gutter';
 // import 'hypermd/addon/markdown-fold';
-// import 'hypermd/addon/overlay';
 import 'hypermd/addon/read-link';
 import 'hypermd/addon/click';
 import 'hypermd/addon/hover';
-import 'hypermd/addon/paste';
 import 'hypermd/addon/insert-file';
 import 'hypermd/addon/mode-loader';
 import 'hypermd/addon/table-align';
 // Folding
 import 'hypermd/addon/fold-image';
-import 'hypermd/addon/fold-emoji';
 import 'hypermd/addon/fold-html';
 import 'hypermd/addon/fold-code';
 import 'hypermd/addon/fold-link';
+import 'hypermd/addon/fold-emoji';
 import 'hypermd/addon/fold-math';
 
 import 'hypermd/powerpack/hover-with-marked';
 import 'hypermd/powerpack/paste-with-turndown';
 import 'hypermd/powerpack/fold-code-with-flowchart';
+import 'hypermd/addon/paste';
+
 import 'hypermd/powerpack/insert-file-with-smms';
 import 'hypermd/powerpack/fold-emoji-with-emojione';
+// import 'hypermd/powerpack/fold-emoji-with-twemoji';
 
 
 
 class MarkdownEditor extends Component {
+  state = { content: "", pendingUpdate: false}
   constructor(props) {
       super(props);
       this.state = {
@@ -54,20 +54,26 @@ class MarkdownEditor extends Component {
 
 
   }
-
+componentDidUpdate(prevProps) { // componentDidUpdate is significant because this.props already contains the new props
+  if (prevProps.note._rev !== this.props.note._rev){
+    console.log("componentDidUpdate prevProps", prevProps)
+    console.log("componentDidUpdate prevProps rev", prevProps.note._rev)
+    console.log("componentDidUpdate props rev", this.props.note._rev)
+    this.setState({content: this.props.note.content}) // closes #61
+  }
+}
 
   render() {
     const updateContent=(editor, data, value)=> {
-    // console.log("updateContent editor",editor)
-    // console.log("updateContent data",data)
+    console.log("updateContent editor",editor)
+    console.log("updateContent data",data)
     // console.log("updateContent value",value)
-    // handler(()=>this.props.noteActions.updateNote(this.props.note._id, {content: value}))
-// console.log(value)
-// this.props.noteActions.updateNote(this.props.note._id, {content: value})
-      // this.setState({content:value})
-      this.setState({content:value}) ;
       clearTimeout(this.timeout)
-      this.timeout = setTimeout(()=> {this.props.noteActions.updateNote(this.props.note._id, {content: value})}, 5000)
+      const saveContents = ()=> {
+        this.props.noteActions.updateNote(this.props.note._id, {content: value})
+        editor.markClean()
+      }
+      this.timeout = setTimeout(saveContents, 5000)
   }
     const options = {
       mode: 'hypermd',
@@ -109,12 +115,31 @@ class MarkdownEditor extends Component {
     };
       return  <Scrollbars autoHide id="editor-scrollbar">
         <ReactCodeMirror value={this.state.content} ref={this.codeMirrorRef}
+        autoCursor={true}
+        autoScroll={true}
           className="code-mirror_editor"
           options={options}
+          editorDidMount={(editor)=> {
+            this.editor = editor
+          }}
           onBeforeChange={(editor, data, value) => {
             this.setState({content: value});
           }}
-          onChange={updateContent} />
+          onChange={updateContent}
+          onBlur={(editor, event) => {
+            // console.log("onlur editor", editor)
+            // console.log("onlur getValue", editor.getValue())
+            // console.log("onlur event", event)
+            // console.log("onlur timeout", this.timeout)
+            console.log("onlur editor.isClean()", editor.isClean())
+            if (!editor.isClean()) {
+              clearTimeout(this.timeout)
+              console.log("Editor is dirty, updating note in database")
+              this.props.noteActions.updateNote(this.props.note._id, {content: editor.getValue()})
+              editor.markClean()
+            }
+          }}
+          />
       </Scrollbars>;
   }
 }

app/components/MainMenu/MainMenu.tsx

@@ -32,6 +32,7 @@ export default function MainMenu({
   updateNote,
   modalData,
   selectNoteAction,
+  emptyTrash,
   tags,
   notesSync,
   spinner
@@ -40,7 +41,10 @@ export default function MainMenu({
     cmCreateNotebookInside: (e, {note}) => createNotebook(note._id),
     cmShowInMenuHandler: (e, {note}) => updateNote(note._id, {showInMenu: !note.showInMenu, kind: "collection" }),
     cmDeleteNoteHandler: (e, {note}) => softDeleteNote(note._id),
-    cmOpenInEditor: (e, {note}) => selectNoteAction(note._id),
+    cmOpenInEditor: (e, {note}) => selectNoteAction(note._id)
+  };
+  const contextEmptyTrash = (e, data) => {
+    emptyTrash()
   };
   const contextCreateNewNotebook = (e, data) => {
     showNotebookModal(data);
@@ -63,13 +67,16 @@ export default function MainMenu({
 
       />
 
-      <MenuItem
-        label="Trash"
-        icon={<FontAwesomeIcon icon={faTrash} />}
-        compKey="trashMenuItem"
-        onClickHandler={e=> selectNotebook("TRASH")}
-        selected={selectedNotebook === "TRASH"}
-      />
+
+      <ContextMenuTrigger id="trash_trigger">
+        <MenuItem
+          label="Trash"
+          icon={<FontAwesomeIcon icon={faTrash} />}
+          compKey="trashMenuItem"
+          onClickHandler={e=> selectNotebook("TRASH")}
+          selected={selectedNotebook === "TRASH"}
+        />
+      </ContextMenuTrigger>
       <MenuItem
         label="Favourites"
         icon={<FontAwesomeIcon icon={faStar} />}
@@ -148,6 +155,15 @@ export default function MainMenu({
           New Notebook
         </ContexMenuItem>
       </ContextMenu>
+      <ContextMenu id="trash_trigger">
+        <ContexMenuItem
+          data={{ foo: 'bar' }}
+          onClick={contextEmptyTrash}
+          style={{backgroundColor: 'red', color: 'white'}}
+        >
+          Empty Trash
+        </ContexMenuItem>
+      </ContextMenu>
 
       <ModalForm
         visible={showNotebookModalToggle}

app/containers/ContentAreaCont/ContentAreaCont.tsx

@@ -12,7 +12,7 @@ import { findChildren, findSelectedNote, findExistingTags, findNote } from '../M
 import NotesWrapper from '../util/NotesWrapper';
 
 class ContentAreaCont extends PureComponent {
-  componentWillMount = () => {
+  componentDidMount = () => {
     console.log('ContentAreaCont will mount');
 
   }

app/containers/MainMenu/selectors.ts

@@ -2,8 +2,8 @@ import { createSelector } from 'reselect'
 import { uniq } from '../../utils/utils'
 
 const allNotesInternal = state => {return (state && state.notes )? state.notes.filter(n=>n.schema === "note" && !n.deleted) : [] }
+const notes = state => {return (state && state.notes ) ? state.notes : [] }
 export const configs = state => state && state.configs
-export const state = state => state
 
 export const notebookSelector = createSelector(
   allNotesInternal,
@@ -20,6 +20,10 @@ export const allNotes = createSelector(
   allNotesInternal,
   (all) => all
 )
+export const allNotesEverything = createSelector(
+  notes,
+  (all) => all
+)
 
 export const findExistingTags = createSelector(
   allNotesInternal,
@@ -42,6 +46,15 @@ export const findChildrenOfNote = (note) => {
   }
     )
 }
+export const findChildrenOfNoteInclDeleted = (note) => {
+  return createSelector(
+    allNotesEverything,
+    (notes) => {
+    return notes.filter(n => n.parent === note._id)
+
+  }
+    )
+}
 export const findNote = (id) => {
   return createSelector(
     allNotesInternal,

app/containers/MiddleMenu/reducers.ts

@@ -1,6 +1,7 @@
 import { createReducer } from '../../utils/utils'
 import { SEARCH_NOTES, SEARCH_NOTES_RESULTS, SORT_NOTES, SORT_ALPHA } from './actions';
 
+import { SELECT_NOTEBOOK } from '../MainMenu/actions';
 
 const initialState = {
   visibleNotes: [],
@@ -16,7 +17,9 @@ const middleMenuReducer = createReducer(initialState, {
   },
   [SORT_NOTES]: (state, action) => {
     return {...state, sorter: action.sorter}
-  }
-
+  },
+  [SELECT_NOTEBOOK]: (state, action) => {
+    return {...state, search: null}
+  },
 });
 export default middleMenuReducer;

app/file_templates/container/TemplateCont.tsx

@@ -5,7 +5,7 @@ import * as actions from './actions';
 
 import { TemplateStateType } from '../../reducers/types';
 class TemplateCont extends PureComponent {
-  componentWillMount = () => {
+  componentDidMount = () => {
     console.log('TemplateCont will mount');
     dispatchAction.Read({
       targetKey: URL,

app/reducers/noteActions.ts

@@ -12,6 +12,7 @@ export const DELETE_ATTACHMENT= 'DELETE_ATTACHMENT';
 export const DELETE_ATTACHMENT_SUCCESS = 'DELETE_ATTACHMENT_SUCCESS';
 export const DELETE_ATTACHMENT_ERROR = 'DELETE_ATTACHMENT_ERROR';
 export const SOFT_DELETE_NOTE = 'SOFT_DELETE_NOTE';
+export const EMPTY_TRASH = 'EMPTY_TRASH';
 
 export function updateNote(id: string, attributes: string) {
   return dispatch => {
@@ -22,6 +23,17 @@ export function updateNote(id: string, attributes: string) {
     });
   };
 }
+export function emptyTrash() {
+  return (dispatch: Dispatch, getState) => {
+    const state = getState()
+    state.notes.filter(n => n.deleted).map(n=> {
+      dispatch(deleteNote(n._id))
+    })
+    dispatch({
+      type: EMPTY_TRASH
+    });
+  };
+}
 
 export function createNote(parent: string, attributes: object) {
   const noteId = uuid()

app/reducers/notes.ts

@@ -6,7 +6,7 @@ import {createReducer} from '../utils/utils'
 import { UPDATE_NOTE, CREATE_NOTE, DELETE_NOTE, REMOVE_EDITOR, ADD_EDITOR, TOGGLE_MENU_SHOW_NOTE, TOGGLE_PIN_NOTE, ADD_ATTACHMENT} from './noteActions';
 import { notesDB } from '../PouchInit';
 import { SELECT_NOTE } from '../containers/ContentAreaCont/actions';
-
+import { findChildrenOfNoteInclDeleted } from '../containers/MainMenu/selectors'
 
 const initialState = []
 const notesReducer = createReducer(initialState, {
@@ -37,9 +37,20 @@ const notesReducer = createReducer(initialState, {
       console.log("noteToBeNuked: ",noteToBeNuked)
       if (noteToBeNuked.children && noteToBeNuked.children.length > 0) {
         return state // we cannot delete a note with children... what would we do with the children? THINK OF THE CHILDREN!!! D:
+
+        // unless all of the children are also marked as deleted
+        // const children = state.filter(n => n.parent === noteToBeNuked._id)
+        // console.log("Children note objects", children)
+
+        // const allChildrenAreDeleted = children.filter(c => c.deleted).length === children.length
+        // if (allChildrenAreDeleted) {
+        //   console.log("Children have been deleted", children)
+        // } else {
+        //   return state
+        // }
       }
       const parent = noteToBeNuked.parent
-      if (parent !== undefined && parent !== "root") {
+      if ( parent !== undefined && parent !== "root") {
         console.log("parent: ",parent)
         console.log("parent.children: ",parent.children)
         newState = newState.map((note, id) => {
@@ -88,6 +99,7 @@ const notesReducer = createReducer(initialState, {
       })
     }
 
+
   }
 );
 

app/style/code-mirror-markdown.css

@@ -1,6 +1,9 @@
 .CodeMirror {
   height: auto;
 }
+.cm-formatting-lis {
+  font-family: unset;
+}
 .CodeMirror-scroll {
   overflow-y: hidden;
   overflow-x: auto;

app/utils/dark_theme.json

@@ -2,21 +2,21 @@
   "colors": {
     "background": {
       "lift":"#E0E0E0",
-      "light":"#f5f5f4",
-      "menu":"#f5f5f5",
-      "dark": "#171a21",
-      "selected": "#4f8eff"
+      "light":"#FFF3F3",
+      "menu":"#2D3047",
+      "dark": "#0C0D15",
+      "selected": "#1890ff"
     },
     "menu": {
       "selected": "#383e50"
     },
     "text": {
       "black": "#000000",
-      "dark": "#171a21",
-      "light": "#f5f5f4",
+      "dark": "#0C0D15",
+      "light": "#FFEDED",
       "muted": "#858585",
       "coloured": "#5E89FF",
-      "selected": "#f5f5f4"
+      "selected": "#FFEDED"
     },
     "dev": {
       "new": "orange"