implemented opening of external links in new tab

frontend/src/Components/MarkdownEditor.svelte

@@ -1,6 +1,6 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
-    import { api }         from '../urls.svelte.js';
+    import { api, target } from '../urls.svelte.js';
     import { t }           from '../translations.svelte.js';
 
     let {
@@ -119,5 +119,5 @@
 {#if editing}
 <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
 {/if}
-<svelte:element this={type} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} {oncontextmenu} class={{editable}} title={t('long_click_to_edit')} >{@html editValue.rendered}</svelte:element>
+<svelte:element this={type} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} {oncontextmenu} class={{editable}} title={t('long_click_to_edit')} >{@html target(editValue.rendered)}</svelte:element>
 </div>

frontend/src/routes/bookmark/Template.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { target }  from '../../urls.svelte';
     import Tags        from '../tags/TagList.svelte';
 
     let { bookmark } = $props();
@@ -12,7 +13,7 @@
     <legend class="date">
         {bookmark.timestamp.replace('T',' ')}
     </legend>
-    {@html bookmark.comment.rendered}
+    {@html target(bookmark.comment.rendered)}
     <Tags module="bookmark" id={bookmark.id} />
 </fieldset>
 {/if}

frontend/src/routes/document/TimeList.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { onMount } from 'svelte';
+    import { onMount }     from 'svelte';
 
-    import { api }     from '../../urls.svelte.js';
-    import { t }       from '../../translations.svelte.js';
+    import { api, target } from '../../urls.svelte.js';
+    import { t }           from '../../translations.svelte.js';
 
     let {
         company_id,
@@ -59,7 +59,7 @@
         <span class="duration">{(time.duration).toFixed(3)} {t('hours')}</span>
         <span class="subject">{time.subject}</span>
         <span class="start_time">{time.start_time}</span>
-        <span class="description">{@html time.description.rendered}</span>
+        <span class="description">{@html target(time.description.rendered)}</span>
     </div>
     {/each}
     {/if}

frontend/src/routes/search/Search.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { api }           from '../../urls.svelte.js';
+    import { api, target }   from '../../urls.svelte.js';
     import { t }             from '../../translations.svelte.js';
     import { display }       from '../../time.svelte';
 
@@ -184,7 +184,7 @@
     <ul>
     {#each Object.values(bookmarks) as bookmark}
         <li>
-            <a href={bookmark.url} target="_blank">{@html bookmark.comment.rendered}</a>
+            <a href={bookmark.url} target="_blank">{@html target(bookmark.comment.rendered)}</a>
         </li>
     {/each}
     </ul>
@@ -212,10 +212,10 @@
     <ul>
         {#each Object.values(notes) as note}
         <li>
-            <a href="/{note.module}/{note.entity_id}/view" {onclick} >
-                <b>{t(note.module)} {note.entity_id}:</b>
-                {@html note.text.rendered}
-            </a>
+            <b>
+                <a href="/{note.module}/{note.entity_id}/view" {onclick} >{t(note.module)} {note.entity_id}:</a>
+            </b>
+            {@html target(note.text.rendered)}
         </li>
         {/each}
     </ul>
@@ -231,9 +231,10 @@
         <li>
             <a href="/time/{time.id}/view" {onclick} >
                 {display(time.start_time)}{#if time.end_time}…{display(time.end_time)}{/if}
-                {time.subject}<br/>
-                {@html time.description.rendered}
+                {time.subject}
             </a>
+            <br/>
+            {@html target(time.description.rendered)}
         </li>
         {/each}
     </ul>

frontend/src/routes/tags/Reference.svelte

@@ -2,7 +2,7 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
+    import { api, target }   from '../../urls.svelte.js';
     import { t }             from '../../translations.svelte.js';
 
     let { module, id } = $props();
@@ -38,7 +38,7 @@
 {#if object}
 {#if module=='bookmark'}
 <a href={object.url}>{object.url}</a>
-<div>{@html object.comment.rendered}</div>
+<div>{@html target(object.comment.rendered)}</div>
 {:else if module=='task'}
 <span onclick={go}>{object.name}</span>
 {:else if module=='document'}

frontend/src/urls.svelte.js

@@ -1,3 +1,22 @@
+const anchor_regex = /<a\s+([^>]*)href=['"]([^'"]+)['"]([^>]*)>/gi;
+
 export function api(rel_path){
     return `${location.protocol}//${location.host.replace('5173','8080')}/api/${rel_path}`;
 }
+
+export function target(code){
+    if (!code) return null;
+    let altered = code;
+
+    let match;
+    while(match = anchor_regex.exec(code)) {
+        const orig = match[0];
+        const href = match[2];
+        if (orig.includes('target=')) continue; // if there is already a target: skip
+        if (!href.includes('://')) continue; // if this is a relative path: skip
+        const anchor = '<a target="_blank" '+orig.substring(3);
+        altered = altered.replaceAll(orig,anchor);
+    }
+
+    return altered;
+}