refactor: replace getNote() with editorController.current?.note

apps/mobile/src/components/dialogs/vault/index.js

@@ -34,6 +34,7 @@ import Seperator from '../../ui/seperator';
 import { Toast } from '../../toast';
 import Paragraph from '../../ui/typography/paragraph';
 import SearchService from '../../../services/search';
+import { editorController } from '../../../screens/editor/tiptap/utils';
 
 let Keychain;
 const passInputRef = createRef();
@@ -390,7 +391,7 @@ export class VaultDialog extends Component {
       return;
     } else {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === getNote()?.id) {
+      if (this.state.note.id === editorController.current?.note?.id) {
         eSendEvent(eClearEditor);
       }
       this.close();
@@ -500,7 +501,7 @@ export class VaultDialog extends Component {
     }
     if (this.state.note?.id) {
       await db.vault.add(this.state.note.id);
-      if (this.state.note.id === getNote()?.id) {
+      if (this.state.note.id === editorController.current?.note?.id) {
         eSendEvent(eClearEditor);
       }
       this.setState({

apps/mobile/src/components/mergeconflicts/index.js

@@ -30,6 +30,7 @@ import DialogContainer from '../dialog/dialog-container';
 import DialogHeader from '../dialog/dialog-header';
 import Seperator from '../ui/seperator';
 import Paragraph from '../ui/typography/paragraph';
+import { editorController } from '../../screens/editor/tiptap/utils';
 
 const primaryWebView = createRef();
 const secondaryWebView = createRef();
@@ -161,7 +162,7 @@ const MergeConflicts = () => {
       Navigation.routeNames.Favorites,
       Navigation.routeNames.Notes
     ]);
-    if (getNote()?.id === note.id) {
+    if (editorController.current?.note?.id === note.id) {
       updateNoteInEditor();
     }
     close();

apps/mobile/src/components/notehistory/preview.js

@@ -1,19 +1,18 @@
 import React, { useRef } from 'react';
-import { Alert, Platform, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import WebView from 'react-native-webview';
-import { useThemeStore } from '../../stores/theme';
-import { useEditorStore } from '../../stores/stores';
+import { getNote, sourceUri } from '../../screens/editor/Functions';
+import { editorController } from '../../screens/editor/tiptap/utils';
 import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
+import { useEditorStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/theme';
 import { db } from '../../utils/database';
 import { eCloseProgressDialog, eOnLoadNote } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
 import { normalize } from '../../utils/size';
-import { getNote, sourceUri } from '../../screens/editor/Functions';
-import tiny from '../../screens/editor/tiny/tiny';
-import { IconButton } from '../ui/icon-button';
-import { Button } from '../ui/button';
 import DialogHeader from '../dialog/dialog-header';
+import { Button } from '../ui/button';
 import Paragraph from '../ui/typography/paragraph';
 
 export default function NotePreview({ session, content }) {
@@ -72,8 +71,8 @@ export default function NotePreview({ session, content }) {
   async function restore() {
     await db.noteHistory.restore(session.id);
     if (useEditorStore.getState()?.currentEditingNote === session?.noteId) {
-      if (getNote()) {
-        eSendEvent(eOnLoadNote, { ...getNote(), forced: true });
+      if (editorController.current?.note) {
+        eSendEvent(eOnLoadNote, { ...editorController.current?.note, forced: true });
       }
     }
     eSendEvent(eCloseProgressDialog, 'note_history');

apps/mobile/src/screens/editor/EditorHeader.js

@@ -1,6 +1,6 @@
 import { EV, EVENTS } from 'notes-core/common';
 import React, { useEffect, useRef } from 'react';
-import { BackHandler, InteractionManager, Keyboard, Platform, Vibration, View } from 'react-native';
+import { BackHandler, InteractionManager, Platform, Vibration, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { notesnook } from '../../../e2e/test.ids';
 import { Properties } from '../../components/properties';
@@ -15,7 +15,6 @@ import {
 import Navigation from '../../services/navigation';
 import { useEditorStore, useSettingStore, useUserStore } from '../../stores/stores';
 import { useThemeStore } from '../../stores/theme';
-import { editing } from '../../utils';
 import umami from '../../utils/analytics';
 import { SUBSCRIPTION_STATUS } from '../../utils/constants';
 import { db } from '../../utils/database';
@@ -30,13 +29,12 @@ import {
 } from '../../utils/events';
 import { tabBarRef } from '../../utils/global-refs';
 import { EditorTitle } from './EditorTitle';
-import { clearEditor, getNote, setColors, startClosingSession } from './Functions';
 import { ProgressCircle } from './ProgressCircle';
-import tiny, { safeKeyboardDismiss } from './tiny/tiny';
+import { safeKeyboardDismiss } from './tiny/tiny';
 import { endSearch } from './tiny/toolbar/commands';
 import { toolbarRef } from './tiny/toolbar/constants';
 import picker from './tiny/toolbar/picker';
-import { editorState } from './tiptap/utils';
+import { editorController, editorState } from './tiptap/utils';
 
 const EditorHeader = ({ editor }) => {
   const colors = useThemeStore(state => state.colors);
@@ -114,7 +112,7 @@ const EditorHeader = ({ editor }) => {
       return;
     }
 
-    let note = getNote() && db.notes.note(getNote().id).data;
+    let note = db.notes.note(editorController.current?.note?.id)?.data;
     if (note.locked) {
       ToastEvent.show({
         heading: 'Locked notes cannot be published',
@@ -131,7 +129,7 @@ const EditorHeader = ({ editor }) => {
   };
 
   const showActionsheet = async () => {
-    let note = getNote() && db.notes.note(getNote().id).data;
+    let note = db.notes.note(editorController.current?.note?.id)?.data;
 
     if (!note) {
       ToastEvent.show({

apps/mobile/src/screens/editor/EditorSettings.js

@@ -19,6 +19,7 @@ import { sleep } from '../../utils/time';
 import { EditorWebView, getNote } from './Functions';
 import tiny from './tiny/tiny';
 import ToggleSwitch from 'toggle-switch-react-native';
+import { editorController } from './tiptap/utils';
 
 export const EditorSettings = () => {
   const colors = useThemeStore(state => state.colors);
@@ -144,7 +145,7 @@ export const EditorSettings = () => {
           changeDirection(${settings.directionality === 'rtl' ? false : true})
         `
         );
-        eSendEvent('loadingNote', getNote());
+        eSendEvent('loadingNote', editorController.current?.note);
         await sleep(100);
         EditorWebView.current?.reload();
       }

apps/mobile/src/screens/editor/tiny/toolbar/picker.js

@@ -12,7 +12,7 @@ import { db } from '../../../../utils/database';
 import { eCloseProgressDialog } from '../../../../utils/events';
 import { sleep } from '../../../../utils/time';
 import { EditorWebView, getNote } from '../../Functions';
-import { editorState } from '../../tiptap/utils';
+import { editorController, editorState } from '../../tiptap/utils';
 import tiny, { safeKeyboardDismiss } from '../tiny';
 
 const FILE_SIZE_LIMIT = 500 * 1024 * 1024;
@@ -338,7 +338,7 @@ async function attachFile(uri, hash, type, filename, options) {
     } else {
       encryptionInfo = { hash: hash };
     }
-    await db.attachments.add(encryptionInfo, getNote()?.id);
+    await db.attachments.add(encryptionInfo, editorController.current?.note?.id);
     if (Platform.OS === 'ios') await RNFetchBlob.fs.unlink(uri);
 
     return true;

apps/mobile/src/screens/editor/tiny/toolbar/searchreplace.js

@@ -12,6 +12,7 @@ import { EditorWebView, getNote } from '../../Functions';
 import tiny from '../tiny';
 import { endSearch } from './commands';
 import { properties } from './constants';
+import { editorController } from '../../tiptap/utils';
 
 const SearcReplace = () => {
   const colors = useThemeStore(state => state.colors);
@@ -195,7 +196,7 @@ const SearcReplace = () => {
         fwdRef={switchModeRef}
         iconColor={enableReplace ? colors.accent : colors.icon}
         onPress={() => {
-          if (getNote()?.readonly) return;
+          if (editorController.current?.note?.readonly) return;
           hideAllTooltips();
           if (enableReplace) {
             if (focusType === 2) {

apps/mobile/src/screens/editor/tiptap/commands.ts

@@ -54,6 +54,18 @@ statusBar.current.set({date:"",saved:""});
 
   setStatus = (date: string | undefined, saved: string) =>
     call(this.ref, fn(`statusBar.current.set({date:"${date}",saved:"${saved}"})`));
+
+  setPlaceholder = (placeholder: string) => {
+    call(
+      this.ref,
+      fn(`
+    const element = document.querySelector(".is-editor-empty");
+    if (element) {
+      element.setAttribute("data-placeholder","${placeholder}");
+    }
+    `)
+    );
+  };
 }
 
 export default Commands;

apps/mobile/src/screens/editor/tiptap/useEditor.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import WebView from 'react-native-webview';
 import { DDS } from '../../../services/device-detection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../../services/event-manager';
+import { TipManager } from '../../../services/tip-manager';
 import { useEditorStore } from '../../../stores/stores';
 import { useThemeStore } from '../../../stores/theme';
 import { db } from '../../../utils/database';
@@ -48,6 +49,8 @@ export const useEditor = () => {
   const sessionHistoryId = useRef<number>();
   const state = useRef<Partial<EditorState>>(defaultState);
   console.log('state: ', defaultState);
+  const placeholderTip = useRef(TipManager.placeholderTip());
+
   const postMessage = useCallback(
     async (type: string, data: any) => await post(editorRef, type, data),
     []
@@ -102,6 +105,8 @@ export const useEditor = () => {
     currentContent.current = null;
     useEditorStore.getState().setCurrentlyEditingNote(null);
     commands.clearContent();
+    placeholderTip.current = TipManager.placeholderTip();
+    commands.setPlaceholder(placeholderTip.current);
   }, []);
 
   const saveNote = useCallback(
@@ -306,6 +311,7 @@ export const useEditor = () => {
       console.log('force reload note');
       loadNote({ ...currentNote.current, forced: true });
     } else {
+      commands.setPlaceholder(placeholderTip.current);
       restoreEditorState();
     }
   }, [state, currentNote, loadNote]);

apps/mobile/src/screens/home/index.js

@@ -14,7 +14,7 @@ import { db } from '../../utils/database';
 import { eOnLoadNote } from '../../utils/events';
 import { tabBarRef } from '../../utils/global-refs';
 import { getNote } from '../editor/Functions';
-import { editorState } from '../editor/tiptap/utils';
+import { editorController, editorState } from '../editor/tiptap/utils';
 
 export const Home = ({ navigation }) => {
   const notes = useNoteStore(state => state.notes);
@@ -82,7 +82,7 @@ export const Home = ({ navigation }) => {
 
   const _onPressBottomButton = React.useCallback(async () => {
     if (!DDS.isTab) {
-      if (getNote()) {
+      if (!editorController.current?.note) {
         eSendEvent(eOnLoadNote, { type: 'new' });
         editorState().currentlyEditing = true;
         editorState().movedAway = false;

apps/mobile/src/screens/notes/index.js

@@ -18,7 +18,7 @@ import { eOnLoadNote, eOpenAddTopicDialog, refreshNotesPage } from '../../utils/
 import { openLinkInBrowser } from '../../utils/functions';
 import { tabBarRef } from '../../utils/global-refs';
 import { getNote } from '../editor/Functions';
-import { editorState } from '../editor/tiptap/utils';
+import { editorController, editorState } from '../editor/tiptap/utils';
 
 const getNotes = (params, group = true) => {
   if (!params) return [];
@@ -189,7 +189,7 @@ export const Notes = ({ route, navigation }) => {
     }
     setActionAfterFirstSave();
     if (!DDS.isTab) {
-      if (getNote()) {
+      if (editorController.current?.note) {
         eSendEvent(eOnLoadNote, { type: 'new' });
         editorState().currentlyEditing = true;
         editorState().movedAway = false;

apps/mobile/src/services/sync.js

@@ -5,6 +5,7 @@ import { doInBackground } from '../utils';
 import { db } from '../utils/database';
 import { getNote, updateNoteInEditor } from '../screens/editor/Functions';
 import { ToastEvent } from './event-manager';
+import { editorController } from '../screens/editor/tiptap/utils';
 
 const run = async (context = 'global', forced = false, full = true) => {
   let result = false;
@@ -59,7 +60,7 @@ const run = async (context = 'global', forced = false, full = true) => {
   } finally {
     userstore.setLastSynced(await db.lastSynced());
     initialize();
-    if (getNote()?.id) {
+    if (editorController.current?.note?.id) {
       await updateNoteInEditor();
     }
     userstore.setSyncing(false);