fix keyboard refocus in editor

apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js

@@ -9,7 +9,7 @@ import { hexToRGBA } from '../../utils/ColorUtils';
 import { sleep } from '../../utils/TimeUtils';
 import { EditorWebView, textInput } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { focusEditor } from '../../views/Editor/tiny/toolbar/constants';
+import { focusEditor, reFocusEditor } from '../../views/Editor/tiny/toolbar/constants';
 import { Toast } from '../Toast';
 import { GetPremium } from './GetPremium';
 
@@ -53,16 +53,7 @@ const ActionSheetWrapper = ({
   };
 
   const _onClose = async () => {
-    if (editing.isFocused === true) {
-      textInput.current?.focus();
-      await sleep(10);
-      if (editing.focusType == 'editor') {
-        focusEditor();
-      } else {
-        Platform.OS === 'android' && EditorWebView.current.requestFocus();
-        tiny.call(EditorWebView, tiny.focusTitle);
-      }
-    }
+    await reFocusEditor();
     if (onClose) {
       onClose();
     }

apps/mobile/src/views/Editor/EditorHeader.js

@@ -154,8 +154,8 @@ const EditorHeader = () => {
   const showActionsheet = async () => {
     let note = getNote() && db.notes.note(getNote().id).data;
     if (editing.isFocused) {
-      tiny.call(EditorWebView, tiny.blur);
-      await sleep(300);
+      Keyboard.dismiss();
+      await sleep(500);
       editing.isFocused = true;
     }
 

apps/mobile/src/views/Editor/tiny/tiny.js

@@ -19,10 +19,10 @@ window.blur();
 
 const removeMarkdown = `
  tinymce.activeEditor.plugins.textpattern.setPatterns("")
-`
+`;
 const setMarkdown = `
  tinymce.activeEditor.plugins.textpattern.setPatterns(markdownPatterns)
-`
+`;
 
 const keyboardStateChanged = `(function() {
   let node = tinymce.activeEditor.selection.getNode();
@@ -152,8 +152,7 @@ isLoading = false;
 const html = value => post('html', value);
 
 const focusEditor = `
-window.focus();
-tinymce.activeEditor.focus();
+ tinymce.activeEditor.focus();
 `;
 
 function call(webview, func, noqueue) {
@@ -186,7 +185,7 @@ const onKeyboardShow = () => {
   if (!editing.movedAway) {
     editing.isFocused = true;
     if (Platform.OS === 'ios') {
-      if (editing.focusType === "title") return;
+      if (editing.focusType === 'title') return;
       call(EditorWebView, keyboardStateChanged);
     }
   }

apps/mobile/src/views/Editor/tiny/toolbar/constants.js

@@ -1,7 +1,9 @@
 import { createRef } from 'react';
 import {Platform} from 'react-native';
 import { eSendEvent } from '../../../../services/EventManager';
-import {EditorWebView} from '../../Functions';
+import { editing } from '../../../../utils';
+import { sleep } from '../../../../utils/TimeUtils';
+import {EditorWebView, textInput} from '../../Functions';
 import tiny from '../tiny';
 
 export const properties = {
@@ -17,17 +19,32 @@ export function formatSelection(command) {
   EditorWebView.current?.injectJavaScript(command);
 }
 
-export function focusEditor(format,kill=true) {
+export async function focusEditor(format,kill=true) {
   kill && eSendEvent("showTooltip");
-  Platform.OS === 'android' && EditorWebView.current.requestFocus();
+  Platform.OS === "android" && EditorWebView.current.requestFocus();
   if (format === 'link' || format === 'video') {
     tiny.call(EditorWebView, tiny.blur + ' ' + tiny.focusEditor);
   } else {
-
+    console.log('focus editor');
+    EditorWebView.current?.requestFocus();
     tiny.call(EditorWebView, tiny.focusEditor);
   }
 }
 
+export async function reFocusEditor() {
+  if (editing.isFocused === true) {
+    await sleep(300);
+    textInput.current?.focus();
+    await sleep(300);
+    if (editing.focusType == 'editor') {
+      focusEditor(null,false);
+    } else {
+      Platform.OS === 'android' && EditorWebView.current?.requestFocus();
+      tiny.call(EditorWebView, tiny.focusTitle);
+    }
+  }
+}
+
 export function rgbToHex(color) {
   color = '' + color;
   if (!color || color.indexOf('rgb') < 0) {

apps/mobile/src/views/Editor/tiny/toolbar/item.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Platform} from 'react-native';
-import {View,TouchableOpacity} from 'react-native';
+import {View, TouchableOpacity} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {PressableButton} from '../../../../components/PressableButton';
 import Heading from '../../../../components/Typography/Heading';
@@ -17,7 +17,7 @@ import {db} from '../../../../utils/DB';
 import {eShowGetPremium} from '../../../../utils/Events';
 import {normalize, SIZE} from '../../../../utils/SizeUtils';
 import {sleep} from '../../../../utils/TimeUtils';
-import { EditorWebView } from '../../Functions';
+import {EditorWebView} from '../../Functions';
 import tiny from '../tiny';
 import {execCommands} from './commands';
 import {
@@ -190,10 +190,10 @@ const ToolbarItem = ({
       let user = await db.user.getUser();
       if (user && !user.isEmailConfirmed) {
         if (editing.isFocused) {
-          tiny.call(EditorWebView, tiny.blur);
+          Keyboard.dismiss();
           await sleep(300);
           editing.isFocused = true;
-        }    
+        }
         PremiumService.showVerifyEmailDialog();
       } else {
         eSendEvent(eShowGetPremium, {
@@ -206,10 +206,10 @@ const ToolbarItem = ({
     }
     if (type === 'settings') {
       if (editing.isFocused) {
-        tiny.call(EditorWebView, tiny.blur);
+        Keyboard.dismiss();
         await sleep(300);
         editing.isFocused = true;
-      }  
+      }
       eSendEvent('openEditorSettings');
       return;
     }

apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js

@@ -1,14 +1,19 @@
 import { getLinkPreview } from 'link-preview-js';
 import React, { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
 import { Image, ScrollView, View,TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { ActionIcon } from '../../../../components/ActionIcon';
 import Heading from '../../../../components/Typography/Heading';
 import Paragraph from '../../../../components/Typography/Paragraph';
 import { useTracked } from '../../../../provider';
+import { editing } from '../../../../utils';
 import { openLinkInBrowser } from '../../../../utils/functions';
 import { SIZE } from '../../../../utils/SizeUtils';
-import { INPUT_MODE, properties } from './constants';
+import { sleep } from '../../../../utils/TimeUtils';
+import { EditorWebView, textInput } from '../../Functions';
+import tiny from '../tiny';
+import { focusEditor, INPUT_MODE, properties, reFocusEditor } from './constants';
 
 let prevLink = {};
 let prevHeight = 50;
@@ -90,8 +95,9 @@ const LinkPreview = ({setMode, value, onSubmit}) => {
   const openLink = () => {
     openLinkInBrowser(value, colors)
       .catch((e) => {})
-      .then((r) => {
-        console.log('closed');
+      .then(async (r) => {
+        console.log('closed browser now');
+        await reFocusEditor();
       });
   };