Updated markdown renderer, added localhost:* to CSP connect-src (#1310)

lib/platform-bible-react/dist/index.d.ts

@@ -1191,6 +1191,12 @@ export interface MarkdownRendererProps {
 	/** The markdown string to render */
 	markdown: string;
 	className?: string;
+	/**
+	 * The [`target` attribute for `a` html
+	 * tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). Defaults to not
+	 * adding a `target` to `a` tags
+	 */
+	anchorTarget?: string;
 }
 /**
  * This component renders markdown content given a markdown string. It uses typography styles from
@@ -1200,7 +1206,7 @@ export interface MarkdownRendererProps {
  * @param id Optional unique identifier
  * @returns A div containing the rendered markdown content.
  */
-export function MarkdownRenderer({ id, markdown, className }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+export function MarkdownRenderer({ id, markdown, className, anchorTarget, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
 export declare enum DropdownMenuItemType {
 	Check = 0,
 	Radio = 1

lib/platform-bible-react/package.json

@@ -71,6 +71,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "lucide-react": "^0.452.0",
+    "markdown-to-jsx": "^7.6.2",
     "next-themes": "^0.3.0",
     "platform-bible-utils": "file:../platform-bible-utils",
     "react-data-grid": ">=7.0.0-beta.42",

lib/platform-bible-react/src/components/advanced/extension-marketplace/markdown-renderer.component.tsx

@@ -1,12 +1,19 @@
 import { cn } from '@/utils/shadcn-ui.util';
-import Markdown from 'markdown-to-jsx';
+import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
+import { useMemo } from 'react';
 
 interface MarkdownRendererProps {
   /** Optional unique identifier */
   id?: string;
   /** The markdown string to render */
   markdown: string;
   className?: string;
+  /**
+   * The [`target` attribute for `a` html
+   * tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). Defaults to not
+   * adding a `target` to `a` tags
+   */
+  anchorTarget?: string;
 }
 
 /**
@@ -17,10 +24,27 @@ interface MarkdownRendererProps {
  * @param id Optional unique identifier
  * @returns A div containing the rendered markdown content.
  */
-export default function MarkdownRenderer({ id, markdown, className }: MarkdownRendererProps) {
+export default function MarkdownRenderer({
+  id,
+  markdown,
+  className,
+  anchorTarget,
+}: MarkdownRendererProps) {
+  const options: MarkdownToJSX.Options = useMemo(
+    () => ({
+      overrides: {
+        a: {
+          props: {
+            target: anchorTarget,
+          },
+        },
+      },
+    }),
+    [anchorTarget],
+  );
   return (
     <div id={id} className={cn('pr-twp tw-prose', className)}>
-      <Markdown>{markdown}</Markdown>
+      <Markdown options={options}>{markdown}</Markdown>
     </div>
   );
 }

lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx

@@ -18,6 +18,7 @@ import MarketplaceExamples from './advanced/marketplace.example.component';
 import InventoryExample from './advanced/inventory-example.component';
 import SettingsListExamples from './advanced/settings-list.examples.component';
 import BookSelectorExample from './advanced/book-selector-example.component';
+import MarkdownRendererExample from './advanced/markdown-renderer-example.component';
 
 function Compositions({ direction }: HasDirection) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
@@ -80,6 +81,7 @@ function Compositions({ direction }: HasDirection) {
           <VerticalTabsTrigger value="Scroll Group Selector">
             Scroll Group Selector
           </VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Markdown Renderer">Markdown Renderer</VerticalTabsTrigger>
         </VerticalTabsList>
 
         <VerticalTabsContent value="Book Chapter Control">
@@ -147,6 +149,10 @@ function Compositions({ direction }: HasDirection) {
         <VerticalTabsContent value="Settings List">
           <SettingsListExamples />
         </VerticalTabsContent>
+
+        <VerticalTabsContent value="Markdown Renderer">
+          <MarkdownRendererExample />
+        </VerticalTabsContent>
       </VerticalTabs>
     </div>
   );

lib/platform-bible-react/src/preview/pages/components/advanced/markdown-renderer-example.component.tsx

@@ -0,0 +1,59 @@
+import MarkdownRenderer from '@/components/advanced/extension-marketplace/markdown-renderer.component';
+import { Input } from '@/components/shadcn-ui/input';
+import { useState } from 'react';
+
+function MarkdownRendererExample() {
+  const [markdown, setMarkdown] = useState(`
+# Sample Markdown
+
+<!-- Here's a comment -->
+
+This is an example of some markdown content that can be displayed using the \`MarkdownRenderer\` component in \`platform-bible-react\`.
+- This is *one thing*
+- This is **another**
+
+<div style="color: red">
+This is a red div
+</div>
+
+## Here's an h2
+
+1. Here's the first list item
+2. And the second item
+3. Visit [example.com](https://example.com) now!
+
+| Sample  | Column | headers |
+|---------|--------|---------|
+| Row     | thing  | another |
+| Header  | some   | thing   |
+| Another | 3      | *512*   |
+
+\`\`\`typescript
+const doesSupportCodeBlocks = true;
+const doesSupportSyntaxHighlighting = false;
+\`\`\``);
+  const [anchorTarget, setAnchorTarget] = useState('');
+  return (
+    <div>
+      <div>
+        Anchor Target:{' '}
+        <Input
+          className="tw-inline-block"
+          value={anchorTarget}
+          onChange={(event) => setAnchorTarget(event.target.value)}
+        />{' '}
+        (Change this to _blank to make links open in a new tab)
+      </div>
+      <textarea
+        className="tw-resize"
+        cols={60}
+        rows={15}
+        value={markdown}
+        onChange={(event) => setMarkdown(event.target.value)}
+      />
+      <MarkdownRenderer markdown={markdown} anchorTarget={anchorTarget} />
+    </div>
+  );
+}
+
+export default MarkdownRendererExample;

src/renderer/index.ejs

@@ -66,6 +66,7 @@
         https: communicate with secure networks
         ws: communicate with webSockets
           TODO: try to template the specific url from ClientNetworkConnector in. paranext-core#89
+        localhost:* communicate with local servers that extensions launch
       img-src load images
         'self' so images can be loaded from us
         papi-extension: so images can be loaded from installed extensions
@@ -100,7 +101,7 @@
         object-src 'none';
         worker-src 'self';
         manifest-src 'self';
-        connect-src 'self' https: ws:;
+        connect-src 'self' https: ws: localhost:*;
         img-src 'self' papi-extension: https: data:;
         media-src 'self' papi-extension: https: data:;
         font-src 'self' papi-extension: https: data:;