diff --git a/apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js b/apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js index 8baee8def..7801922ce 100644 --- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js +++ b/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(); } diff --git a/apps/mobile/src/views/Editor/EditorHeader.js b/apps/mobile/src/views/Editor/EditorHeader.js index 55c4ee1bf..23f676116 100644 --- a/apps/mobile/src/views/Editor/EditorHeader.js +++ b/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; } diff --git a/apps/mobile/src/views/Editor/tiny/tiny.js b/apps/mobile/src/views/Editor/tiny/tiny.js index 655a1f01b..e0cf8056a 100644 --- a/apps/mobile/src/views/Editor/tiny/tiny.js +++ b/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); } } diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/constants.js b/apps/mobile/src/views/Editor/tiny/toolbar/constants.js index 7eac497e8..69081262c 100644 --- a/apps/mobile/src/views/Editor/tiny/toolbar/constants.js +++ b/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) { diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/item.js b/apps/mobile/src/views/Editor/tiny/toolbar/item.js index 4d49c57d5..63b2c5179 100644 --- a/apps/mobile/src/views/Editor/tiny/toolbar/item.js +++ b/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; } diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js b/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js index 844d17632..7d24e936d 100644 --- a/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js +++ b/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(); }); };