Merge branch 'main' of github.com:paranext/paranext-core into 434-set…

…tings-dialog-stub

extensions/src/hello-someone/hello-someone.ts

@@ -314,6 +314,12 @@ export async function activate(context: ExecutionActivationContext): Promise<voi
     await peopleWebViewProviderPromise,
     await helloSomeoneCommandPromise,
     await echoSomeoneRendererPromise,
+    papi.webViews.onDidAddWebView((addWebViewEvent) => {
+      if (addWebViewEvent.webView.webViewType === peopleWebViewType)
+        logger.info(
+          `We noticed a ${peopleWebViewType} webView was added with id ${addWebViewEvent.webView.id}`,
+        );
+    }),
   );
 
   logger.info('Hello Someone is finished activating!');

extensions/src/hello-someone/hello-someone.web-view.html

@@ -187,6 +187,10 @@
         newWebViewButton.addEventListener('click', async () => {
           const webViewId = await papi.webViews.getWebView('helloSomeone.peopleViewer', {
             type: 'float',
+            floatSize: {
+              width: 450,
+              height: 350,
+            },
           });
           print(`New People webview id: ${webViewId}`);
         });

extensions/src/hello-world/hello-world.ts

@@ -52,6 +52,7 @@ const reactWebViewProvider: IWebViewProviderWithType = {
       );
     return {
       ...savedWebView,
+      iconUrl: 'papi-extension://hello-world/assets/offline.svg',
       title: 'Hello World React',
       content: helloWorldReactWebView,
       styles: helloWorldReactWebViewStyles,

extensions/src/hello-world/web-views/hello-world.web-view.tsx

@@ -14,8 +14,9 @@ import {
 import type { QuickVerseDataTypes } from 'quick-verse';
 import type { PeopleDataProvider, PeopleDataTypes } from 'hello-someone';
 import type { UsfmProviderDataTypes } from 'usfm-data-provider';
-import { Key, useCallback, useContext, useMemo, useState } from 'react';
+import { Key, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import type { HelloWorldEvent } from 'hello-world';
+import type { DialogTypes } from 'renderer/components/dialogs/dialog.data';
 import Clock from './components/clock.component';
 
 type Row = {
@@ -27,7 +28,7 @@ type Row = {
 const {
   react: {
     context: { TestContext },
-    hooks: { useData, useDataProvider, usePromise, useEvent, useSetting },
+    hooks: { useData, useDataProvider, usePromise, useEvent, useSetting, useDialogCallback },
   },
   logger,
 } = papi;
@@ -59,15 +60,20 @@ papi
 globalThis.webViewComponent = function HelloWorld() {
   const test = useContext(TestContext) || "Context didn't work!! :(";
 
-  const [clicks, setClicks] = useState(0);
+  const [clicks, setClicks] = globalThis.useWebViewState<number>('clicks', 0);
   const [rows, setRows] = useState(initializeRows());
   const [selectedRows, setSelectedRows] = useState(new Set<Key>());
   const [scrRef, setScrRef] = useSetting('platform.verseRef', defaultScrRef);
 
   // Update the clicks when we are informed helloWorld has been run
   useEvent(
     'helloWorld.onHelloWorld',
-    useCallback(({ times }: HelloWorldEvent) => setClicks(times), []),
+    useCallback(
+      ({ times }: HelloWorldEvent) => {
+        if (times > clicks) setClicks(times);
+      },
+      [clicks, setClicks],
+    ),
   );
 
   const [echoResult] = usePromise(
@@ -80,6 +86,16 @@ globalThis.webViewComponent = function HelloWorld() {
     'retrieving',
   );
 
+  const [project, selectProject] = useDialogCallback(
+    'platform.selectProject',
+    useRef({
+      prompt: 'Please select a project for Hello World WebView:',
+      iconUrl: 'papi-extension://hello-world/assets/offline.svg',
+      title: 'Select Hello World Project',
+    }).current,
+    'None' as DialogTypes['platform.selectProject']['responseType'],
+  );
+
   const [latestVerseText] = useData.Verse<QuickVerseDataTypes, 'Verse'>(
     'quickVerse.quickVerse',
     'latest',
@@ -147,6 +163,10 @@ globalThis.webViewComponent = function HelloWorld() {
       </div>
       <div>{personGreeting}</div>
       <div>{personAge}</div>
+      <div>Selected Project: {project}</div>
+      <div>
+        <Button onClick={selectProject}>Select Project</Button>
+      </div>
       <h3>John 1:1</h3>
       <div>{john11}</div>
       <h3>Psalm 1</h3>

extensions/src/resource-viewer/resource-viewer.web-view.tsx

@@ -1,7 +1,7 @@
-import { VerseRef } from '@sillsdev/scripture';
+import { VerseRef } from '@sillsdev/scripture';
 import papi from 'papi-frontend';
 import { ScriptureReference } from 'papi-components';
-import { useMemo } from 'react';
+import { JSX, useMemo } from 'react';
 // eslint-disable-next-line import/no-unresolved
 import { UsfmProviderDataTypes } from 'usfm-data-provider';
 import UsxEditor from 'usxeditor';
@@ -24,8 +24,15 @@ interface ElementInfo {
   validStyles?: StyleInfo[];
 }
 
+const {
+  react: {
+    hooks: { useData, useSetting },
+  },
+  logger,
+} = papi;
+
 /** All available elements for use in slate editor */
-const EditorElements: { [type: string]: ElementInfo } = {
+const editorElements: { [type: string]: ElementInfo } = {
   verse: {
     inline: true,
     validStyles: [{ style: 'v', oneWord: true }],
@@ -109,9 +116,9 @@ const EditorElements: { [type: string]: ElementInfo } = {
   },
 };
 
-const UsxEditorParaMap = EditorElements.para.validStyles?.map((style) => style.style) || [];
-const UsxEditorCharMap = Object.fromEntries(
-  EditorElements.char.validStyles?.map((style) => [style.style, {}]) || [],
+const usxEditorParaMap = editorElements.para.validStyles?.map((style) => style.style) || [];
+const usxEditorCharMap = Object.fromEntries(
+  editorElements.char.validStyles?.map((style) => [style.style, {}]) || [],
 );
 
 interface ScriptureTextPanelUsxProps {
@@ -134,8 +141,8 @@ function ScriptureTextPanelUsxEditor({ usx }: ScriptureTextPanelUsxProps) {
     <div className="text-panel">
       <UsxEditor
         usx={usx}
-        paraMap={UsxEditorParaMap}
-        charMap={UsxEditorCharMap}
+        paraMap={usxEditorParaMap}
+        charMap={usxEditorCharMap}
         onUsxChanged={() => {
           /* Read only */
         }}
@@ -144,14 +151,7 @@ function ScriptureTextPanelUsxEditor({ usx }: ScriptureTextPanelUsxProps) {
   );
 }
 
-const {
-  react: {
-    hooks: { useData, useSetting },
-  },
-  logger,
-} = papi;
-
-globalThis.webViewComponent = function ResourceViewer() {
+globalThis.webViewComponent = function ResourceViewer(): JSX.Element {
   logger.info('Preparing to display the Resource Viewer');
 
   const [scrRef] = useSetting('platform.verseRef', defaultScrRef);