Allow internal links to be opened in a new tab

packages/client/src/components/app/Link.svelte

@@ -21,11 +21,25 @@
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = getComponentText(text, $builderStore, $component)
+  $: sanitizedUrl = getSanitizedUrl(url, externalLink, openInNewTab)
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getSanitizedUrl = (url, externalLink, newTab) => {
+    if (!url) {
+      return externalLink || newTab ? "#/" : "/"
+    }
+    if (externalLink) {
+      return url
+    }
+    if (openInNewTab) {
+      return `#${url}`
+    }
+    return url
+  }
+
   const getComponentText = (text, builderState, componentState) => {
     if (!builderState.inBuilder || componentState.editing) {
       return text || ""
@@ -65,10 +79,10 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if externalLink}
+  {#if externalLink || openInNewTab}
     <a
       {target}
-      href={url || "/"}
+      href={sanitizedUrl}
       use:styleable={styles}
       class:placeholder
       class:bold
@@ -79,10 +93,10 @@
       {componentText}
     </a>
   {:else}
-    {#key url}
+    {#key sanitizedUrl}
       <a
         use:linkable
-        href={url || "/"}
+        href={sanitizedUrl}
         use:styleable={styles}
         class:placeholder
         class:bold