Make URLs in citation page clickable

src/SharedStyles.js

@@ -149,6 +149,14 @@ export const sharedStyles = css`
     cursor: pointer;
   }
 
+  .linkicon {
+    --md-icon-size: 15px;
+    margin-right: 8px;
+    position: relative;
+    bottom: -1px;
+    opacity: 0.7;
+  }
+
   .nopointer {
     pointer-events: none;
   }

src/components/GrampsjsCitation.js

@@ -4,7 +4,7 @@ import '@material/mwc-icon'
 
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsjsFormEditCitationDetails.js'
-import {fireEvent} from '../util.js'
+import {fireEvent, linkUrls} from '../util.js'
 
 const BASE_DIR = ''
 
@@ -60,7 +60,7 @@ export class GrampsjsCitation extends GrampsjsObject {
           ? html`
               <div>
                 <dt>${this._('Page')}</dt>
-                <dd>${this.data.page}</dd>
+                <dd>${linkUrls(this.data.page, false)}</dd>
               </div>
             `
           : ''}

src/components/GrampsjsNoteContent.js

@@ -1,15 +1,6 @@
 import {html, css, LitElement} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
-
-const urlRegex =
-  /((?:^|\s)https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
-
-function linkUrls(text) {
-  return text.replace(
-    urlRegex,
-    url => `<a href="${url}" target="_blank">${url}</a>`
-  )
-}
+import {linkUrls} from '../util.js'
 
 export class GrampsjsNoteContent extends LitElement {
   static get styles() {

src/util.js

@@ -4,7 +4,8 @@ import '@material/mwc-icon'
 import dayjs from 'dayjs/esm'
 import relativeTime from 'dayjs/esm/plugin/relativeTime'
 
-import {asteriskIcon, crossIcon} from './icons.js'
+import {mdiOpenInNew} from '@mdi/js'
+import {asteriskIcon, crossIcon, renderIconSvg} from './icons.js'
 import {frontendLanguages} from './strings.js'
 import {hex6ToCss, hex12ToCss} from './color.js'
 
@@ -588,3 +589,24 @@ export function dateIsEmpty(date) {
   }
   return true
 }
+
+const urlRegex =
+  /((?:^|\s)https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
+
+export function linkUrls(text, textOnly = true) {
+  if (textOnly) {
+    return text.replace(
+      urlRegex,
+      url => `<a href="${url}" target="_blank">${url}</a>`
+    )
+  }
+  const parts = text.split(urlRegex)
+  return html`${parts.map(part =>
+    part.match(urlRegex)
+      ? html`<a href="${part}" target="_blank">${part}</a>
+          <md-icon class="linkicon"
+            >${renderIconSvg(mdiOpenInNew, '#0d47a1')}</md-icon
+          > `
+      : part
+  )}`
+}