Plugins: Resolves #5288: Improved support for fitToContent webview property (#5298)

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

@@ -40,7 +40,24 @@ joplin.plugins.register({
 		`);
 
 		const result3 = await dialogs.open(handle3);
-		console.info('Got result: ' + JSON.stringify(result3));
+		console.info('Got result: ' + JSON.stringify(result3));		
+		
+
+		const handle4 = await dialogs.create('myDialog4');
+		await dialogs.setHtml(handle4, `
+		<h1>This dialog tests dynamic sizing</h1>
+		<h3>Resize the window and the dialog should resize accordingly</h3>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+		</p>
+		`);
+		let tmpDlg: any = dialogs; // Temporary cast to use new properties.
+		await tmpDlg.setFitToContent(handle4, false);
+		await dialogs.open(handle4);
+
 	},
 
 });

packages/app-desktop/gui/MainScreen/MainScreen.tsx

@@ -785,6 +785,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 				scripts={view.scripts}
 				pluginId={plugin.id}
 				buttons={view.buttons}
+				fitToContent={view.fitToContent}
 			/>);
 		}
 

packages/app-desktop/services/plugins/UserWebviewDialog.tsx

@@ -9,6 +9,7 @@ const styled = require('styled-components').default;
 
 interface Props extends UserWebviewProps {
 	buttons: ButtonSpec[];
+	fitToContent: boolean;
 }
 
 const StyledRoot = styled.div`
@@ -31,6 +32,8 @@ const Dialog = styled.div`
 	padding: ${(props: any) => `${props.theme.mainPadding}px`};
 	border-radius: 4px;
 	box-shadow: 0 6px 10px #00000077;
+	width: ${(props: any) => props.fitToContent ? 'auto' : '90vw'};
+	height: ${(props: any) => props.fitToContent ? 'auto' : '80vh'};
 `;
 
 const UserWebViewWrapper = styled.div`
@@ -103,7 +106,7 @@ export default function UserWebviewDialog(props: Props) {
 
 	return (
 		<StyledRoot>
-			<Dialog>
+			<Dialog fitToContent={props.fitToContent}>
 				<UserWebViewWrapper>
 					<UserWebview
 						ref={webviewRef}
@@ -113,7 +116,7 @@ export default function UserWebviewDialog(props: Props) {
 						viewId={props.viewId}
 						themeId={props.themeId}
 						borderBottom={false}
-						fitToContent={true}
+						fitToContent={props.fitToContent}
 						onSubmit={onSubmit}
 						onDismiss={onDismiss}
 						onReady={onReady}

packages/lib/services/plugins/WebviewController.ts

@@ -58,6 +58,7 @@ export default class WebviewController extends ViewController {
 				scripts: [],
 				opened: false,
 				buttons: null,
+				fitToContent: true,
 			},
 		});
 	}
@@ -173,4 +174,11 @@ export default class WebviewController extends ViewController {
 		this.setStoreProp('buttons', buttons);
 	}
 
+	public get fitToContent(): boolean {
+		return this.storeView.fitToContent;
+	}
+
+	public set fitToContent(fitToContent: boolean) {
+		this.setStoreProp('fitToContent', fitToContent);
+	}
 }

packages/lib/services/plugins/api/JoplinViewsDialogs.ts

@@ -98,4 +98,12 @@ export default class JoplinViewsDialogs {
 		return this.controller(handle).open();
 	}
 
+	/**
+	 * Toggle on whether to fit the dialog size to the content or not.
+	 * When set to false, the dialog is set to 90vw and 80vh
+	 * @default true
+	 */
+	async setFitToContent(handle: ViewHandle, status: boolean) {
+		return this.controller(handle).fitToContent = status;
+	}
 }