Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Plugins: Resolves #4474: Focus dialog when it is opened so that ENTER/ESC shortcuts work

pull/4492/head
Laurent Cozic 2021-02-07 09:39:56 +00:00
parent 11c8bf7e6e
commit 526b16b931
3 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app-cli/tests/support/plugins/dialog/src/index.ts
View File

@ -5,9 +5,9 @@ joplin.plugins.register({
const dialogs = joplin.views.dialogs;
const handle = await dialogs.create('myDialog1');
await dialogs.setHtml(handle, '<p>Testing dialog with default buttons</p><p>Second line</p><p>Third line</p>');
await dialogs.setHtml(handle, '<p>Testing dialog with default buttons</p><p>Second line</p><p>Third linexxx</p>');
const result = await dialogs.open(handle);
alert('Got result: ' + JSON.stringify(result));
console.info('Got result: ' + JSON.stringify(result));
const handle2 = await dialogs.create('myDialog2');
await dialogs.setHtml(handle2, '<p>Testing dialog with custom buttons</p><p>Second line</p><p>Third line</p>');
@ -25,7 +25,7 @@ joplin.plugins.register({
]);
const result2 = await dialogs.open(handle2);
alert('Got result: ' + JSON.stringify(result2));
console.info('Got result: ' + JSON.stringify(result2));
const handle3 = await dialogs.create('myDialog3');
await dialogs.setHtml(handle3, `
@ -38,7 +38,7 @@ joplin.plugins.register({
`);
const result3 = await dialogs.open(handle3);
alert('Got result: ' + JSON.stringify(result3));
console.info('Got result: ' + JSON.stringify(result3));
},
});

14
packages/app-desktop/services/plugins/UserWebview.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { useRef, useImperativeHandle, forwardRef } from 'react';
import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
import useViewIsReady from './hooks/useViewIsReady';
import useThemeCss from './hooks/useThemeCss';
import useContentSize from './hooks/useContentSize';
@ -23,8 +23,9 @@ export interface Props {
fitToContent?: boolean;
borderBottom?: boolean;
theme?: any;
onSubmit?: any;
onDismiss?: any;
onSubmit?: Function;
onDismiss?: Function;
onReady?: Function;
}
const StyledFrame = styled.iframe`
@ -66,6 +67,10 @@ function UserWebview(props: Props, ref: any) {
const isReady = useViewIsReady(viewRef);
const cssFilePath = useThemeCss({ pluginId: props.pluginId, themeId: props.themeId });
useEffect(() => {
if (isReady && props.onReady) props.onReady();
}, [isReady]);
function frameWindow() {
if (!viewRef.current) return null;
return viewRef.current.contentWindow;
@ -89,6 +94,9 @@ function UserWebview(props: Props, ref: any) {
return null;
}
},
focus: function() {
if (viewRef.current) viewRef.current.focus();
},
};
});

8
packages/app-desktop/services/plugins/UserWebviewDialog.tsx
View File

@ -94,6 +94,13 @@ export default function UserWebviewDialog(props: Props) {
}
}, [buttons]);
const onReady = useCallback(() => {
// We focus the dialog once it's ready to make sure that the ESC/Enter
// keyboard shortcuts are working.
// https://github.com/laurent22/joplin/issues/4474
if (webviewRef.current) webviewRef.current.focus();
}, []);
return (
<StyledRoot>
<Dialog>
@ -109,6 +116,7 @@ export default function UserWebviewDialog(props: Props) {
fitToContent={true}
onSubmit={onSubmit}
onDismiss={onDismiss}
onReady={onReady}
/>
</UserWebViewWrapper>
<UserWebviewDialogButtonBar buttons={buttons}/>